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请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 
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114.2 Alpha 滤 镜 


Alpha 泥 镜 能 实现 针对 图 片 文字 元 素 的 “透明 ”效果 ， 这 种 透明 效果 是 通过 “把 一 个 目标 
元 素 和 背景 混合 ”来 实现 的 ， 混 合 程度 可 以 由 用 户 指定 数值 来 控制 。 通 过 指定 坐标 ， 可 以 指 
定点 、 线 和 面 的 透明 度 。 如 果 将 Alpha 泥 镜 与 网 页 脚本 语言 结合 ， 并 适当 地 设置 其 参数 ， 就 能 


使 图 像 显示 淡 入 淡出 的 效果 。 
Alpha 泥 镜 的 语法 格式 如 


{filter : 


Alpha ( enabled=bEnabled, style=iStyle, opacity=iOpacity, 


finishOopacity=iFinishOpacity, 


startx=iPercent, starty=iPercent, finishx=iPercent, 


finishy=iPercent )} 


各 参数 如 表 11-2 所 示 。 


表 11-2 Alpha 滤 镜 参数 


参数 说 明 

enabled 设置 滤 镜 是 否 激活 

ii 设置 透明 渐变 的 样式 ， 也 就 是 渐变 显示 的 形状 ， 取 值 为 0-3。0 表 示 无 渐变 ，1 表 示 线 形 渐 
变 ，2 表 示 贺 形 渐变 ，3 表 示 和 矩形 渐变 

opacity 设置 透明 度 ， 值 范围 是 0~100。0 表 示 完 全 透明 ，100 表 示 完 全 不 透明 

finishOpacity 设置 结束 时 透明 度 ， 值 范围 也 是 0~100。 

startx 设置 透明 渐变 开始 点 的 水 平 坐标 〈 即 x 坐 标 ) 

starty 设置 透明 渐变 开始 点 的 垂直 坐标 〈 即 y 坐 标 ) 

finishx 设置 透明 渐变 结束 点 的 水 平 坐标 

finishy 设置 透明 渐变 结束 点 的 垂直 坐标 


【 例 11.1】 实 例文 件 : ch11\11.1.html 


<html> 
<head> 


<title>Alpha 滤 镜 </title> 


</head> 


<body> 


原始 图 <img src="baimd.jpg" style="width:200px;height:120px;"> 


style=0<img src="baimd.jpg" style="width:200px;height:120px;filter 


: Alpha (opacity=60 ， style=0)" > 


style=2<img src="baimd.jpg" style="width:200px;height:120px;filter 


: Alpha (opacity=60 ， style=2)" > 


style=3 <img src="baimd.jpg" style="width:200px;height:120px;filter 


: Alpha (opacity=60 ， style=3)" > 
</body> 


</html> 
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在 IE9.0 中 浏览 效果 如 图 11-1 所 示 ， 可 以 看 到 显示 了 4 张 图 片 ， 其 透明 度 依次 减弱 。 


mm ocx sw 人 CE 


(1) 由 于 Alpha 涯 镜 使 当前 元 素 部 分 透明 ， 该 元 素 下 层 的 内 容 的 颜色 对 整个 效果 起 着 


作用 ， 因 此 颜色 的 合理 搭配 相当 重要 。 
(2) 透明 度 的 大 小 要 根据 具体 情况 仔细 调整 ， 取 一 个 最 佳 值 。 
Alpha 沽 镜 不 但 能 应 用 于 图 片 ， 还 可 以 应 用 于 文字 透明 特效 。 


【 例 11.2】 实 例文 件 : ch11\11.2.html 


<html> 
<head> 
<title>Alpha 滤 镜 </title> 
<style type="text/css"> 
<!-- 
Pi 
color:yellow; 
font-weight:bolder; 
font-size:25pt; 
width:100% 
} 
--> 
</style> 
</head> 
<body style="background-color:Black"> 
<div > 
<p>Alpha 滤 镜 </p> 
<p style="filter:alpha (opacity=60 ， style=1) "> 透明 效果 </p> 
<p style="filter:alpha (opacity=60 ，style=2) "> 透明 效果 </p> 


<p style="filter:alpha (opacity=60 ， style=3) "> 透明 效果 </p> 
</div> 


</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-2 所 示 ， 可 以 看 到 显 出 现 了 4 个 段落 ， 其 透明 度 依 次 减弱 。 


县 
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[EEC 


图 11-2 文字 透明 效果 


11.3 BlendTrans 滤 镑 


BlendTrans 滤 镜 是 一 种 高 级 小 镜 ， 如 果 要 实现 效果 ， 需 要 结合 JavaScript。 该 小 镜 可 以 实 
现 HTML 对 象 的 渐 隐 渐 现 效果 。 
BlendTrans 滤 镜 语 法 格式 如 下 : 


{ filter : BlendTrans ( enabled=bEnabled , duration=fDuration ) } 


上 述 代 码 中 ，enabled 表 示 是 否 激 活 滤 镜 ; duration 表 示 整 个 转换 过 程 所 需要 的 时 间 ， 单 位 
为 秒 。 
【 例 11.3】 实 例文 件 : ch11\11.3.html 


<html > 
<head> 
<title>BlendTrans 滤 镜 </title> 
<style type="text/css"> 
之 
-blendtrans { filter:blendTrans (Duration=3) } 
= 
</style> 
</head> 
<body onload="playImg () "> 
<img src="baimd.jpg" class="blendtrans" id="imgpic" style="width:300px; 
height:280px;" /> 
<script language="JavaScriptn> 
一 
// 声明 数组 ， 数 组 元 素 的 个 数 就 是 图 片 的 个 数 ， 然 后 给 数组 元 素 赋值 ， 值 为 图 片 路 径 
ImgNum=new ImgRArray(2) > 
ImgNum[0]="baimd.jpg"7 
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ImgNum[1]="baihua.jpg"7 
// 获取 数组 记录 数 
function ImgArray (len) 
{ 
this.length=len; 
} 
var i=1? 
// 转 换 过 程 
function playImg (){ 
IE (i==1){ 
i=0 } 
上 
elsel{ 
于 
imgpic.filters[0] .apply(); 
imgpic.src=ImgNum[i]; 
imgpic.filters[0] .play(); 
// 设置 演示 时 间 ， 这 里 是 以 毫秒 为 单位 的 ，4000 则 表示 延迟 秒 
// 滤 镜 中 设置 的 转换 时 间 值 ， 这 样 当 转 换 结束 后 还 停留 一 段 时 间 
timeout=setTimeout ('playImg ()', 4000); 
} 
一 -> 
</script> 
</body> 
</html> 


代码 中 ， 对 HTML 元 素 img 中 应 用 了 BlendTrans 滤 镜 ， 然 后 使 用 JavaScript 脚 本 语言 来 定义 


转换 过 程 。 对 于 JavaScript 代 码 ， 要 声明 用 来 存储 图 片 数 组 ， 并 指定 图 片 所 在 路 径 。 然 


后 ， 再 


获取 数组 长 度 ， 用 于 转换 过 程 中 循环 读 取 图 片 数量 。 接 着 定义 转换 过 程 playimg， 该 过 程 实现 
了 两 幅 图 片 之 间 淡 入 淡出 并 进行 转换 的 过 程 ，apply 方 法 用 于 捕获 对 象 内 容 的 初始 显示 ， 为 转 


换 做 必要 的 准备 。timeout 指 定 了 转换 的 延迟 时 间 ， 再 加 上 小 镜 中 设置 的 转换 时 间 ， 则 


图 片 在 


转换 之 间 将 停留 ， 以 方便 清楚 地 浏览 图 片 。 最 后 ， 在 主体 元 素 body 中 插入 onload 事 件 ， 加 载 


转换 过 程 。 
在 IE9.0 中 浏览 效果 如 图 11-3 所 示 ， 可 以 看 到 一 张 图 片 慢 慢 消 失 ， 一 张 图 片 慢 慢 出 
张 图 片 不 断 循环 往复 ， 从 而 实现 渐变 效果 。 


国 CBR D + GX 等 senarrancss 


图 11-3 实现 渐 隐 渐 现 效果 


现 ， 两 
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11.4 ”Blur 滤 镜 


Blur 滤 镜 实现 页 面 模糊 效果 ， 即 在 一 个 方向 上 的 运动 模糊 。 如 果 应 用 得 当 ， 就 可 以 产生 


Blur 泥 镜 的 语法 格式 如 下 ; 


{filter : Blur ( enabled=bEnabled , add=iadd ， direction=idirection ， 
strength=fstrength )} 


Blur 属 性 值 及 其 含义 如 表 11-3 所 示 。 


表 11-3 Blur 属 性 值 
参数 说 明 
enabled 设置 源 镜 是 否 激活 
指定 图 片 是 否 改变 成 模糊 效果 。 这 是 个 布尔 参数 ， 有 效 值 为 True 或 False。True 是 默认 值 ， 表 示 
应 用 模糊 效果 ，False 则 表示 不 应 用 
设 定 模糊 方向 。 模 糊 的 效果 是 按 顺 时 针 方 向 起 作用 的 ， 取 值 范围 为 0~360”，45。 为 一 个 间 
direction 隔 。 有 8 个 方向 值 ，0 表 示 向 上 ，45 表 示 右 上 ，90 表 示 向 右 ，135 表 示 右 下 ，180 表 示 向 下 ，225 
表示 左下 ，270 表 示 向 左 ，315 表 示 左 上 
指定 模糊 半径 大 小 ， 单 位 是 像 系 ， 默 认 值 为 5;， 取 值 范围 为 自然 数 ， 该 取 值 决定 了 模糊 效果 的 
strength 延伸 范围 


【 例 11.4】 实 例文 件 : ch11\11.4.html 


<html> 

<head> 
<title> 模 糊 Blur</title> 
<style> 

img{ 


height:180px; 
} 
div.div2 { width:400px;filter:blur(add=true,direction=90, strength=50) } 
</style> 


</head> 
<body> 
原始 图 <img src="baihua.jpg"> 
add=true<img src="baihua.jpg" style="filter:Blur(add=true,direction 
=225, strength=20)"> 
add=false<img src="baihua.jpg" style="filter:Blur (add=false, 
direction=225,strength=20)"> 
<div class="div2"> 
<p style="font-size: 30pt; font-weight: bold; color:DarkBlue"> 
Blur 滤 镜 </p> 
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</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-4 所 示 ， 可 以 看 到 两 张 模 糊 图 片 ， 在 一 定 方向 上 发 生 模 糊 ， 下 
方 的 文字 也 发 生 了 模糊 ， 具 有 文字 吹风 的 效果 。 


5 
| 
原址 国 | 本 gd-true 
| 区 且 
| 


1 Blur 滤 镜 


图 11-4 模糊 效果 


14.5 Chroma 滤 镜 


Chroma 泥 镜 可 以 设置 HIML 对 象 中 指定 的 颜色 为 透明 色 。 其 语法 格式 如 下 ， 
{filter : Chroma (enabled=bEnabled , color=sColor)} 

其 中 ，color 参 数 设置 要 变 为 透明 色 的 颜色 。 

【 例 11.5】 实 例文 件 : ch11\11.5.html 


<html> 
<head> 
<title>Chroma 滤 镜 </title> 
<style> 
i 


div{position:absolute;top:70;letf:40; filter:Chroma (color=blue)} 
p{font-size:30pt; font-weight:bold; color:blue} 
> 
</style> 
</head> 
<body> 
<p>Chroma 滤 镜 效 果 </p> 
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<div> 
<p>Chroma 滤 镜 效 果 </p> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-5 所 示 ， 可 以 看 到 第 二 个 段落 ， 某 些 笔画 丢失 。 但 拖 动 鼠标 选 
择 过 涯 颜色 后 的 文字 ， 便 可 以 查看 过 滤 掉 颜色 的 文字 。 


[全 OCT 


Chroma 滤 镜 效果 


(Chem 久 中 


图 11-5 Chroma 涛 镜 效 果 


Chroma 涯 镜 一 般 应 用 于 文字 特效 ， 而 且 对 于 有 些 格 式 的 图 片 也 是 不 适用 的 。 例 如 ， 
JPEG 格 式 的 图 片 是 一 种 已 经 减 色 和 压缩 处 理 的 图 片 ， 要 设置 其 中 某 种 颜色 透明 将 十 分 困难 。 


11.6 DropShadow 滤 镜 


阴影 效果 在 实际 的 文字 和 图 片 中 非常 实用 ，IE9.0 通 过 DropShadow 沽 镜 建立 阴影 效果 ， 使 
元 素 内 容 在 页 面 上 产生 投影 ， 从 而 实现 立体 的 效果 。 其 工作 原理 就 是 创建 一 个 偏 移 量 ， 并 定 
一 个 阴影 颜色 ， 使 之 产生 效果 。 
DropShadow 泥 镜 语法 格式 如 下 : 
{filter:DropShadow ( enabled=bEnabled ， color=sColor , offx=iOffsetx, offy=iOffsety, 
positive=bPositive ) } 


DropShadow 的 属性 值 及 其 说 明 如 表 11-4 所 示 。 


表 11-4 DropShadow 属 性 值 


属性 值 说 明 
enabled 设置 沽 镜 是 否 激活 
color 指定 沽 镜 产生 的 阴影 颜色 


offx 指定 阴影 水 平方 向 偏 移 量 ， 默 认 值 为 5px 
offy 指定 阴影 垂直 方向 偏 移 量 ， 默 认 值 为 SPx 

| 指定 阴影 透明 程度 ， 为 布尔 值 。True (1) 表示 为 任何 非 透 明 像 对 建立 可 见 的 阴影 ， False (0) 
PS TY。 | 表示 为 透明 的 像 系 部 分 建立 透明 效果 
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【 例 11.6】 实 例文 件 : ch11\11.6.html 


<html> 
<head> 
<title>DropShadow 滤 镜 </title> 
</head> 
<body> 
<table width="90%" height="90%"> 
<tr> 
<td style="filter: DropShadow (color=gray,offx=10,offy=10, 
positive=1)"> 
<img src="9.jpg" > 
</td> 
RE 
<tr> 
<td style="filter: DropShadow (color=gray,offx=5,offy= 
5,positive=1); 
font-size:20pt; color:DarkBlue"> 
这 是 一 个 阴影 效果 
</td> 
</tr> 
</table> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-6 所 示 ， 可 以 看 到 图 片 产生 了 阴影 ， 但 不 明显 ， 下 方 文字 产生 
阴影 效果 明显 。 


二 | 是 omitAhliul P - Cx)|Boropshadowi x 


图 11-6 阴影 效果 
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{ty FlipH 滤 镜 


在 CSS3 中 ， 可 以 通过 FlipH 溪 镜 实现 HTML 对 象 翻转 效果 ， 其 中 FlipH 泥 镜 用 于 水 平 翻转 
对 象 ， 即 将 元 素 对 象 按 水 平方 向 进行 180” 翻转 。FlipH 汤 镜 可 以 在 CSS 中 直接 使 用 ， 使 用 格 
式 如 下 : 


{Fliter: FlipH (enabled=bEnabled)} 
该 尖 镜 中 只 有 一 个 enabled 参 数 ， 表 示 是 否 激活 该 滤 镜 。 
【 例 11.7】 实 例文 件 : ch11\11.7.html 


<html > 
<head> 
<title>FlipH 滤 镜 </title> 

<style> 

img{ 

height:120px; 

width:200px; 

I 

</style> 

</head> 

<body> 
原 图 片 <img src="9.jpg"> 
图 片 水 平 翻转 <img src="9.jpg" style="Filter:FlipH()"> 


</body> 

</html> 

在 IE9.0 中 浏览 效果 如 图 11-7 所 示 ， 可 以 看 到 图 片 以 中 心 为 支点 ， 进 行 了 左右 方向 上 的 
翻转 。 
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11.8 Glow 滤 镜 


文字 或 物体 发 光 的 特性 往往 能 吸引 浏览 者 注意 ，Glow 涯 镜 可 以 使 对 象 的 边缘 产生 一 种 柔 
和 的 边框 或 光 晕 ， 并 可 产生 如 火焰 一 样 的 效果 。 

语法 格式 如 下 : 

{filter : Glow ( enabled=bEnabled , color=sColor ， strength=iDistance ) } 

其 中 ，color 设 置 边 缘 光 晕 颜 色 ，stength 设 置 晕 圈 范围 ， 值 范围 是 ]-255， 值 越 大 效果 越 强 。 

【 例 11.8】 实 例文 件 : ch11\11.8.html 


<html> 
<head> 
<title>filter glow</title> 
<style> 
ee 
.wenyl{ 
width:100%; 
filter:Glow (color=#9966CC, strength=10)} 


一 -> 
</style> 
</head> 
<body> 
<div class="weny"> 
<p style=”font-family: 1 幼 圆 ; font-size: 40pt; font-weight: 
bolder; color: #003366"> 
这 段 文字 带 有 光 晕 ， 喜 欢 么 </p> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-8 所 示 ， 可 以 看 到 文字 带 有 光 时 出 现 ， 非 常 漂亮 。 
当 Glow 泥 镜 作用 于 文字 时 ， 每 个 文字 边缘 都 会 出 现 光 晕 ， 效 果 非 常 强烈 。 而 对 于 图 片 ， 
Glow 泥 镜 只 在 其 边缘 加 上 光 晕 。 


a oem D+ cx A 


| 这 段 文 字 带 有 光学 , 喜 


欢 么 


图 11-8 光 旱 效果 
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119 Gray 滤 镑 


式 如 下 : 


{filter:Gray (enabled=bEnabled)} 
enabled 表 示 是 否 激活 ， 可 以 在 页 面 代码 中 直接 使 用 。 
【 例 11.9】 实 例文 件 : ch11\11.9.html 


<html> 

<head> 
<title>Gray 滤 镜 </title> 
</head> 

<body> 


色 是 一 种 经 典 颜色 ， 使 用 Gray 泥 镜 能 够 轻松 地 将 彩色 图 片 变 为 黑白 图 片 。 其 代码 格 


<img src="9.jpg" style="width: 50%;height:50%" /> 原 图 
<img src="9.jpg" style="width: 50%;height:50%; filter: Gray()" 


/> 灰 度 图 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-9 所 示 ， 可 以 看 到 下 面 一 张 图 片 以 黑 


白色 显示 。 


图 11-9 黑白 色 显 示 图 片 
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11:10 Invert 滤 镜 


Invert 源 镜 可 以 把 对 象 的 可 视 化 属性 全 部 翻转 ， 包 括 色彩 、 饱 和 度 和 亮度 值 ， 使 图 片 产 4 
一 种 “底片 ”或 负片 的 效果 。 其 语法 格式 如 下 : 


{filter:Invert (enabled=bEnabled)} 
enabled 参 数 用 来 设置 是 否 激活 滤 镜 。 
【 例 11.10】 实 例文 件 :， ch11\11.10.html 


<html> 

<head> 

<title>Invert 滤 镜 </title> 

</head> 

<body> 

<img src="9.jpg”/> 原 图 

<img src="9.jpg" style="width:30%; filter: Invert()"” /> 反 相 图 
</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 11-10 所 示 ， 可 以 看 到 下 面 一 张 图 片 以 相片 底片 的 颜色 出 现 。 


中 


图 11-10 反 色 效果 


1 人 41 ”FlipV 渡 镜 


FlipH 滤 镜 用 来 实现 对 象 的 水 平 翻转 ， 而 FlipV 滤 镜 用 来 实现 对 象 的 垂直 翻转 ， 其 中 包括 
文字 和 图 像 。 其 语法 格式 如 下 : 


{Fliter: FlipV (enabled=bEnabled)} 


enabled 参 数 表示 是 否 激活 滤 镜 。 
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【 例 11.11】 实例 文件 : ch11\11.11.html 


<html> 
<head> 
<title>FlipV 滤 镜 </title> 
</head> 
<body> 
<img src="9.jpg"> 原 图 片 
<img src="9.jpg" style="Filter:EFl1ipV() "> 图片 垂直 翻转 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-11 所 示 ， 可 以 看 到 右 方 图 片上 下 发 生 了 翻转 。 


图 11-11 上 下 翻转 


1112 ”Light 滤 镜 


Light 泪 镜 是 一 个 高 级 漏 镜 ， 需 要 结合 JavaScript 使 用 。 该 泥 镜 用 来 产生 类 似 于 光照 灯 效 
果 ， 并 调节 亮度 以 及 颜色 。 其 语法 格式 如 下 : 

{filter:Light (enabled=bEnabled)} 

对 于 已 定义 的 Light 涯 镜 属性 ， 可 以 调用 它 的 方法 (Method) 来 设置 或 改变 属性 。 这 些 方法 
如 表 11-5 所 示 。 


表 11-5 Light 滤 镜 使 用 方法 


方法 说 明 
AddAmbIE9.0nt 加 入 包 国 的 光源 
AddCone 加 入 锥 形 光源 
AddPoint 加 入 点 光源 
Changcolor 改变 光 的 颜色 
Changstrength 改变 光源 的 强度 
Clear 清除 所 有 的 光源 
MoveLight 移动 光源 
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【 例 11.12】 


<html> 
<head> 


</head> 
<body> 


<!-- 
// 


A 


} 
// 


} 


--> 


</body> 
</html> 


在 IE9.0 中 浏 


要 实现 光照 


实例 文件 : ch11\11.12.html 


<title>1ight 滤 镜 效果 </title> 


<table> 
<tr> 


<td style="color:blue; font-weight:bolder"> 


随 鼠 标 变化 的 动态 光源 效果 
</td> 


</tr> 
<tr> 


<td id="light" style="filter: light(); width: 200px"> 
<img src="feng.jpg"> 
</td> 


RE 
</table> 
<script language="Javascript"> 


Var g_numlights=0; 


调用 设置 光源 函数 


window.onload=setlights; 


获得 鼠标 句柄 


1ight .onmousemove=mousehand1ler7 
// 建 立 光源 的 集合 


function setlights(){ 


light.filters[0] .clear (); 
light.filters[0] .addcone (0,0,5,100,100,255,255,0,60,30); 


捕捉 鼠标 的 位 置 来 移动 光线 焦点 


function mousehandler (){ 


x= (window.event .x-80); 
y=(window.event.y-80); 
light.filters[0] .movelight (0,x,y,5,1); 


</script> 


光源 ， 然 后 再 使 


addcone 方 法 创建 锥 形 光源 。 如 果 需 要 在 图 片上 添加 多 束 光源 ， 则 可 以 台 


览 效 果 如 图 11-12 所 示 ， 可 以 看 到 一 幅 图 片 实现 光照 的 效果 ， 而 且 随 着 鼠标 
的 移动 ， 灯 光照 射 的 方向 也 不 相同 ， 类 似 于 镭射 灯 的 效果 。 
效果 ，JavaScript 脚 本 语言 起 主要 作用 。 首 先 要 创建 光源 并 指定 光源 位 置 。 
setlights 函 数 中 filters[0] 表 示 设 置 的 光源 滤 镜 ， 调 用 clear 方 法 在 每 次 页 面 加 载 时 先 清除 所 有 的 


重复 


使 用 addcone 方 法 ， 但 注意 要 使 用 不 同 的 参数 ， 否 则 光源 处 于 同一 位 置 ， 就 无 法 产生 效果 了 。 
函数 mousehandler 用 来 实现 光束 随 着 鼠标 移动 的 效果 。 
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图 11-12 Light 源 镜 效果 


11343 Mask 滤 镜 


可 以 通过 遮 罩 mask， 为 网 页 中 的 元 素 对 象 做 出 一 个 矩形 遮 踢 。 遮 章 就 是 使 用 一 个 颜色 图 


层 将 包含 有 文字 或 图 像 等 对 象 的 区 域 遮盖 ， 但 是 文字 或 图 像 部 分 却 以 背景 色 显示 出 来 。 


Mask 滤 镜 语 法 格式 如 下 : 

{filter:Mask (enabled=bEnabled , color=sColor)} 
参数 color 用 来 设置 Mask 泥 镜 作用 的 颜色 。 

【 例 11.13】 实 例文 件 ， ch11\11.13.html 


<html> 

<head> 

<title>Mask 遮 单 滤 镜 </title> 

<style> 

pat 
width:400; 

filter:mask (color:#FF9900); 
font-size:40pt; 
font-weight:bold; 
color:#00CC99; 


} 

</style> 

</head> 

<body> 

<p> 这 里 有 个 遮 晶 </p> 
</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 11-13 所 示 ， 可 以 看 到 文字 上 面 有 一 个 遮 曾 ， 文 字 颜 色 是 背景 颜色 。 
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RevealTrans 涛 镜 能 够 实现 图 


图 11-13 文字 遮 章 


1414 RevealTrans 滤 镜 


解 、 水 平生 


E 直 ) 


RevealTrans 滤 镜 语 法 格式 如 下 : 


filter 


transition=iTransitionType ) 


其 中 ，enabled 表 示 是 否 激活 泥 镜 ;，duration 用 于 设置 切换 停留 时 间 ，transition 用 于 


换 方 式 ， 即 指定 要 使 用 的 动态 效果 ， 参 数 取 值 是 0~23。 
transition 参 数值 如 表 11-6 所 示 。 


表 11-6 RevealTrans 滤 镜 动态 效果 


: RevealTrans ( enabled=bEnabled ，duration=fDuration , 


像 之 间 的 切换 效果 。 切 换 时 ， 能 产生 32 种 动态 效果 ， 例 如 溶 
展 幕 、 百 叶 窗 等 ， 而 且 还 可 以 随机 选取 其 中 一 种 效果 进行 切换 。 


转 


形 从 大 至 小 0 随机 溶解 12 
和 矩形 从 小 至 大 1 从 上 下 向 中 间 展 开 13 
形 从 大 至 小 这 从 中 间 向 上 下 展开 14 
出 形 从 小 至 大 3 从 两 边 向 中 间 展 开 15 
句 上 推 开 pd 从 中 间 向 两 边 展 开 16 
名 下 推 开 5 从 右上 向 左下 展开 17 
向 右 推 开 6 从 右 下 向 左上 展开 18 
向 左 推 开 7 从 左上 向 右 下 展开 19 
形 百叶 窗 8 从 左下 向 右上 展开 20 
平 形 百 叶 窗 Ed 随机 水 平 细 纹 21 
平 棋盘 10 随机 垂直 细 纹 22 
垂直 棋盘 11 随机 选取 一 种 效果 23 
但 是 ， 如 果 只 设置 了 transition 参 数 来 实现 切换 过 程 的 话 ， 那 么 是 不 会 有 任何 效果 的 ， 因 
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为 动态 效果 的 实现 还 必须 依靠 脚本 语言 JavaScript 调 用 相应 的 方法 。 
【 例 11.14】 实 例文 件 : ch11\11.14.html 


<html > 
<head> 


<title>BlendTrans 滤 镜 </title> 
<style type="text/css"> 


.revealtrans { filter:revealTrans (Transition=10,Duration=3)} 


</style> 
</head> 


<body onload="playImg ()"> 
<img id="imgpic" class="revealtrans" src="9.jpg"/> 
<script language="JavaSscript"> 


-二 三 


// 声明 数组 ， 数 组 元 素 的 个 数 就 是 图 片 的 个 数 ， 然 后 给 数组 元 素 赋值 ， 值 为 图 片 路 径 
ImgNum=new ImgArray (2); 
ImgNum[0]="baimd.jpg"; 
ImgNum[1]="baihua.jpg"; 
// 获取 数组 记录 数 


function ImgArray (len) 


E 


this.length=len; 


} 
Var i=1; 


// 转 换 过 程 


function playImg(){ 


if (i==1){ 
i=0 ; 

上 

elsef{ 
Ey 


} 


imgpic.filters[0] .apply(); 
imgpic.src=ImgNum[i]; 

imgpic.filters[0] .play (); 
// 设置 演示 时 间 ， 这 里 是 以 毫秒 为 单位 的 ，4000 则 表示 延迟 秒 
// 滤 镜 中 设置 的 转换 时 间 值 ， 这 样 当 转 换 结束 后 还 停留 一 段 时 间 


timeout=setTimeout ('playImg ()',4000); 


} 

--> 

</script> 
</body> 
</html> 


对 于 图 片 切换 ， 实 现代 码 与 BlendTrans 涛 镜 的 转换 代码 相似 ， 这 


在 IE9.0 中 浏览 效果 如 
此 循环 往复 。 


+ 


图 11-14 所 示 ， 可 以 看 到 图 


片 以 百叶 窗 的 形式 打开 另 一 


个 


就 不 再 介绍 了 。 


图 片 ， 如 
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ee 全 Dvstmhn P - Ox [aendransn 


图 11-14 图 片 切换 效果 


1145 Shadow 滤 镜 


| 


可 以 通过 Shadow 泥 镜 来 给 对 象 添 加 阴影 效果 ， 其 实际 效果 看 起 来 好 像 是 对 象 离开 了 页 
并 在 页 面 上 显示 出 该 对 象 阴影 。 阴 影 部 分 的 工作 原理 是 建立 一 个 偏 移 量 ， 并 为 其 加 上 颜色 。 
语法 格式 如 下 : 
{filter:Shadow (enabled=bEnabled , color=sColor , direction=iOffset, 
strength=iDistance)} 


Shadow 的 各 参数 如 表 11-7 所 示 。 
表 11-7 Shadow 滤 镜 参数 


加 


参数 说 明 

enabled 设置 沽 镜 是 否 激活 

| color 设置 投影 的 颜色 

pr 设置 投影 的 方向 ， 分 别 有 8 种 取 值 代表 8 种 方向 : 取 值 为 0 表示 向 上 ，45 为 右上 ，90 为 右 ，135 
为 右 下 ，180 为 下 方 ，225 为 左下 方 ，270 为 左 方 ，315 为 左上 方 

| strength 设置 投影 向 外 扩散 的 距离 


【 例 11.15】 实 例文 件 : ch11\11.15.html 


<html> 
<head> 
<title> 阴 影 效果 </title> 
<style> 
) 
Color:#FF6600; 
width:400; 
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filter:shadow (color=blue, offx=15, offy=22, positive=false); 
} 
</style> 
</head> 
<body> 
<h1> 我 好 看 么 </h1> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 11-15 所 示 ， 可 以 看 到 文字 带 有 阴影 效果 。 


[oe© | 


CJ [a vemchi p - ox | Fem 


图 11-15 Shadow 滤 镜 效果 


1416 Wave 滤 镜 


Wave 泥 镜 可 以 为 对 象 添加 坚 直 方向 上 的 波浪 效果 ， 也 可 以 用 来 把 对 象 按照 坚 直 的 波纹 样 
式 打 乱 。 
语法 格式 如 下 : 


{filter:Wave (enabled=bEnabled , add=bAddImage , freq=iWaveCount ， 
lightstrength=iPercentage , phase=iPercentage ， strength=iDistance) } 


Wave 的 各 参数 说 明 如 表 11-8 所 示 。 
表 11-8 Wave 滤 镜 参 数 


参数 说 明 
enabled 设置 滤 镜 是 否 激活 

add | 布尔 值 ， 表 示 是 否 在 原始 对 象 上 显示 效果 。True 表 示 显 示 ，False 表 示 不 显示 
freq | 设置 生成 波纹 的 频率 ， 也 就 是 设 定 在 对 象 上 产生 的 完整 的 波纹 的 条 数 


lightStrength ”| 波纹 效果 的 光照 强度 ， 取 值 0~100 


a 设置 正弦 波 开始 的 偏 移 量 ， 取 百分比 值 为 0~100， 默 认 值 为 0。25 就 是 360” X259%6 为 
下 90”，50 则 为 180° 
strength | 波纹 曲折 的 强度 
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【 例 11.16】 实 例文 件 : ch11\11.16.html 


<html> 

<head> 

<title> 波 浪 效果 </title> 

过 SVG 

he 
color:violet; 
text-align:left; 
width:400; 
filter:wave (add=true, freq=5, lightstrength=45, phase=20, strength=3); 

} 

</style> 

</head> 

<body> 

<h1> 一 起 去 看 大 海 </h1> 

</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 11-16 所 示 ， 可 以 看 到 文字 带 有 波浪 效果 。 


Eo 


rE 


图 11-16 波浪 效果 


1147 X-ray 滤 镜 


X-ray 中 文 含 义 为 X 射 线 ，X-ray 泥 镜 可 以 使 对 象 反映 出 它 的 轮廓 ， 并 把 这 些 轮廓 的 颜色 加 
使 整体 看 起 来 会 有 一 种 X 光 片 的 效果 。 

语法 格式 如 下 : 

{filter:Xray (enabled=bEnabled)} 

enabled 参 数 用 于 确定 是 否 激 活该 小 镜 。 

【 例 11.17】 实 例文 件 : ch11\11.17.html 


<html> 
<head> 
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<title>x 射 线 </title> 
<style> 

-noe { 

filter:xray; 

} 

</style> 

</head> 

<body> 

<img src="9.jpg" class="noe" /> 
<img src="9.jpg" /> 
</body> 

</html> 


在 下 9.0 中 浏览 效果 如 图 11-17 所 示 ， 可 以 看 到 图 片 有 X 光 涯 镜 效 果 。 


.如 何 对 一 个 HIML 对 象 使 用 源 镜 效果 ? 


pp 涯 镜 时 ， 若 使 用 多 个 漏 镜 ， 则 每 个 汤 镜 之 间 用 空格 分 隔 开 ， 一 个 源 镜 中 的 若干 个 


数 用 逗号 分 隔 ，fiter 属 性 和 其 他 样式 属性 并 用 时 以 分 号 分 隔 。 
2. 漏 镜 效 果 是 下 9.0 浏 览 器 特有 的 CSS 特 效 ， 那 么 在 Firefox 中 能 不 能 实现 呢 ? 


漏 镜 效果 虽然 是 IE9.0 浏 览 器 特有 的 效果 ， 但 使 用 Firefox 浏 览 器 一 些 属性 也 可 以 实现 相同 


效果 。 例 如 IE9.0 的 阴影 效果 ， 可 以 在 Firefox 网 页 设计 中 ， 先 在 文字 下 面 再 码 一 
的 字 ， 然 后 做 2px 的 错位 ， 制 造 阴影 的 假象 。 


层 浅 色 的 同样 
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本 章 引言 


网 页 设计 中 ， 能 否 很 好 地 定位 网 页 中 的 每 个 元 素 ， 是 网 页 整 
体 布局 的 关键 。 一 个 布局 混乱 、 元 素 定 位 不 准 的 页 面 ， 是 每 个 济 
览 者 都 不 喜欢 的 。 而 把 每 个 元 素 都 精确 定位 到 合理 位 置 ， 才 是 构 
建 美观 大 方 页 面 的 前 提 。 


Eo Es 


在 
Ce “男人 性 生生 白 ; 雪人 的 性 感 与 年 成 下 此 09-59 “ 支 性 养生 ; 让 女人 者 将 快 的 10 个 原因 19:16 
“六 芝 二 有 效 对 搞 系 外线 11.15 “养生 二 点 : 唱 互 染 的 九 大 好 处 和 七 大 禁忌 09.14 


me 二 “ 打 半 美人 有 (8 的 洁 开发 划 10:05 “， 关 生 区 各 :14 直 扩 扶 必 更“ 楼 " 18:57 
“ 美 面 帮 必 忙 : 到 直 大 的 皮 环 耽 男 人 09 :4T “ 柿子 午 荔 如 汤 i 种 营 关 是 是 委 的 全 物 15:16 


“基本 的 活 百 元 将 出 葬 美 苑 儿 4.5L “夏季 关 生 者 南 : “ 夫 雪 来 " 宜生 史 10. 
“了 过 泣 家 太 四 可 人 7 月 守 阁 出 新 意 11.04 “0 条 全 节 养 生 方法 ， 导 家 宅 人 的 产生 经 13:54 
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从 :1 定位 方式 


在 CSS3 中 ， 定 位 可 以 将 一 个 元 素 精确 地 放 在 页 面 上 用 户 所 指定 的 位 置 ， 而 布局 是 将 整个 
页 面 的 元 素 内 容 整 洁 且 完 美 地 摆 放 。 定 位 的 实现 是 布局 成 功 的 前 提 。 如 果 清 晰 地 掌握 了 定位 
原理 ， 那 么 就 能 够 创建 多 种 高 级 而 精确 的 布局 ， 并 会 让 网 页 更 加 完美 地 实现 。 


《SEN 定位 属性 


在 网 页 设计 中 ， 定 位 〈Positioning) 思想 简单 ， 就 是 用 户 精确 地 定义 HTML 元 素 框 所 在 页 
面 中 的 位 置 ， 可 以 是 页 面 绝对 位 置 ， 也 可 以 处 于 其 上 级 元 素 、 另 一 个 元 素 或 浏览 器 窗口 的 绝 
对 位 置 。 

元 素 框 是 指 包含 每 个 元 素 的 矩形 框 。 而 元 素 内 容 与 元 素 框 共同 形成 了 元 素 块 。 定 位 是 指 
设 定 元 素 块 位 置 和 大 小 。 实 现 CSS3 定 位 ， 需 要 依赖 定位 属性 才能 够 完成 。 

表 12-1 列 出 了 CSS3 中 全 部 有 关 的 定位 属性 。 


表 12-1 定位 属性 


属性 含义 
position 定义 位 置 
left 指定 元 系 横向 距 左 部 距离 
right 指定 元 系 横 向 距 右 部 距离 
top 指定 元 系 纵 向 距 顶 部 距离 
bottom 指定 元 系 纵 向 距 底 部 距离 
z-index 设置 元 系 的 层 合 顺序 
width 设置 元 系 框 宽度 
height 设置 元 丢 框 高 度 
overflow 内 容 溢出 控制 
clip 剪 切 
表 中 前 6 个 属性 是 实际 的 定位 属性 ， 后 面 的 4 个 有 关 属 性 ， 是 用 来 设置 元 素 框 ， 或 对 元 素 
框 中 的 内 容 进 行 控制 的 属性 。 其 中 ，position 属 性 是 最 主要 的 定位 属性 。 它 既 可 以 定义 元 素 框 
的 绝对 位 置 ， 又 可 以 定义 相对 位 置 ， 而 left、right、top 和 bottom 只 在 position 属 性 中 使 用 才 会 


发 挥 作用 。 


本 于 天 position 定 位 

网 页 中 各 种 元 素 需 要 经 过 合理 地 定位 来 搭建 整个 页 面 的 结构 。 在 CSS3 中 ， 可 以 通过 
position 这 个 属性 ， 对 页 面 中 元 素 进行 定位 。 

语法 格式 如 下 : 


人 pm 通 DIV+CSS3 网 页 布局 与 样 式 


position : static 


| absolute | fixed | relative 


position 属 性 值 及 其 含义 如 表 12-2 所 示 。 


表 12-2 position 属 性 值 


1. 绝对 定位 absolute 


Position:absolute 


【 例 12.1】 实 例文 件 : 


<html> 
<head> 


</head> 
<body> 


height:50px; 
</div> 
</body> 
</html> 
在 下 9.0 中 浏览 效果 如 


属性 值 说 明 

i 元 丢 定 位 的 默认 值 ， 无 特殊 定位 ， 对 象 遵循 HTML 定 位 规则 ， 不 能 通过 
z-index 进行 层次 分 级 

lati 相对 定位 ， 对 象 不 可 重 麦 ， 可 以 通过 left、right、bottom 和 top 等 属性 在 正常 文 
档 中 偏 移 位 置 ， 可 以 通过 z-index 进 行 层次 分 级 

i 生成 绝对 定位 的 元 票 ， 相 对 于 static 定 位 以 外 的 第 一 个 父 元 村 进行 定位 。 元 标 
的 位 置 通过 le 从 、top、right 和 bottom 属 性 进行 规定 

总 fixed 生 成 绝对 定位 的 元 票 ， 相 对 于 浏览 器 窗口 进行 定位 。 元 系 的 位 置 通过 
left、top、right 和 bottom 属 性 进行 规定 


绝对 定位 是 参照 浏览 器 的 左上 角 ， 配 合 top、left、bottom 和 和 right 进 行 定位 的 ， 如 果 没有 设 
置 上 述 的 4 个 值 ， 则 默认 依据 父 级 的 坐标 原点 为 原始 点 。 绝 对 定位 可 以 通过 上 、 下 、 左 、 右 
来 设置 元 素 ， 使 其 处 在 任何 一 个 位 置 。 

在 父 层 position 属 性 为 默认 值 时 ， 上 、 下 、 左 、 右 的 坐标 原点 以 body 的 坐标 原点 为 起 始 位 
置 。 绝 对 定位 的 语法 格式 如 下 : 


只 要 将 上 面 代码 加 入 到 样式 中 ， 使 用 样式 的 元 素 就 可 以 以 绝对 定位 的 方式 显示 了 。 


ch12\12.1.html 


<title> 定 位 属性 </title> 


<div style="background-color: Black; width:200px; height:200px"> 
<h2 style=" position:absolute; left:80px; top:80px; width:110px7 


background-color:Red;"> 这 是 绝对 定位 </h2> 


图 12-1 所 示 ， 可 以 看 到 红色 元 素 框 依据 浏览 器 左上 角 为 原点 ， 坐 标 


位 置 为 《80px，80px) ， 宽 度 为 110px， 高 度 为 50px。 
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12-1 绝对 定位 


提 。 使 用 绝对 定位 会 产生 一 个 问题 : 目前， 大 多 数 的 网 页 都 是 居中 显示 的 ， 且 元 素 与 元 素 之 间 布 局 
| 属 ” 是 紧密 的 ， 而 绝对 定位 的 开始 位 置 是 浏览 器 的 左上 角 的 0 点 ， 当 设 定 各 元 素 块 边 偏 移 属性 时 ， 
由 于 客户 端 屏幕 分 辩 率 的 不 同 ， 各 元 素 块 的 显示 可 能 会 有 偏差 。 这 是 由 于 页 面 的 显示 是 随 着 分 辩 率 的 
大 小 而 自动 适应 ， 而 各 元 素 块 在 参照 绝对 定位 的 位 置 显示 ， 那 么 在 浏览 器 的 视野 范围 内 原始 页 面 可 以 
或 超出 或 缩小 地 显示 。 


优秀 的 页 面 设计 能 够 适用 各 种 屏幕 分 辨 率 ， 并 且 保 证 正常 显示 。 要 解决 这 个 问题 ， 在 定 
位 时 最 好 使 用 相对 定位 。 


2. 相对 定位 relative 


如 果 对 一 个 元 素 进 行 相 对 定位 ， 首 先 它 将 出 现在 它 所 在 的 位 置 上 。 然 后 通过 设置 垂直 或 
水 平 位 置 ， 让 这 个 元 素 “ 相 对 于 ” 它 的 原始 起 点 进行 移动 。 另 外 ， 相 对 定位 时 ， 无 论 是 否 进 
行 移动 ， 元 素 仍 然 占 据 原来 的 空间 。 因 此 ， 移 动 元 素 会 导致 它 覆 盖 其 他 框 。 

绝对 定位 与 相对 定位 的 区 别 在 于 : 绝对 定位 的 坐标 原点 为 上 级 元 素 的 原点 ， 与 上 级 元 素 
有 关 ， 相 对 定位 的 坐标 原点 为 本 身 偏 移 前 的 原点 ， 与 上 级 元 素 无 关 。 
相对 定位 的 语法 格式 如 下 : 
position:relative 
【 例 12.2】 实 例文 件 ，ch12\12.2.html 


<html> 

<head> 

<style type="text/css"> 
h2.pos_ left 

| 
position:relative; 
Left:=20pX 

上 

h2.pos right 

{ 
position:relative; 
left:20px 

} 

</style> 

</head> 


QQ、 mia DIV+CSS3 网 页 布局 与 样 式 


<body> 

<h2> 这 是 位 于 正常 位 置 的 标题 </h2> 

<h2 class="pos_left"> 这 个 标题 相对 于 其 正常 位 置 向 左 移动 </h2> 

<h2 class="pos_right"> 这 个 标题 相对 于 其 正常 位 置 向 右 移动 </h2> 
<p> 相 对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 移动 。</p> 

<p> 样 式 "left:-20px"” 从 元 素 的 原始 左 侧 位 置 减 去 20 像素 。</p> 
<p> 样 式 "left:20px” 向 元 素 的 原始 左 侧 位 置 增加 20 像素 。</p> 

</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 12-2 所 示 ， 可 以 看 到 页 面 显示 了 3 个 标题 ,最 上 面 标题 正常 


示 ， 下 面 两 个 标题 分 别 以 正常 位 置 为 原点 ， 向 左 或 向 右 分 别 移动 了 20 像 素 。 
到 -EEC + 
| 这 是 位 于 正常 位 置 的 标题 
福 个 标题 相对 于 其 正常 位 置 向 左 移动 


这 个 标题 相对 于 其 正常 位 置 向 右 移动 


相对 定位 会 按照 元 素 的 原始 位 置 对 该 元 素 进行 炉 动 
样式 “1eft:-20px” 从 元 素 的 原始 左 例 位 置 减 去 20 像素 、 
样式 “left:20px” 向 元 素 的 原始 左 侧 位 置 增加 20 像素 。 


图 12-2 相对 定位 


3. 固定 定位 fixed 


着 滚动 条 的 拖 动 而 变化 位 置 。 在 视线 中 ， 固 定 定位 的 容器 位 置 是 不 会 改变 的 。 
把 一 些 特殊 效果 固定 在 浏览 器 的 视线 位 置 。 


各 


固定 定位 和 绝对 定位 比较 相似 ， 它 是 绝对 定位 的 一 种 特殊 形式 ， 固 定 定位 的 容器 不 会 随 


固定 定位 可 以 


固定 定位 的 参照 位 置 不 是 上 级 元 素 块 而 是 浏览 器 窗口 。 所 以 可 以 使 用 固定 定位 来 设 定 类 


似 传统 框架 样式 布局 ， 以 及 广告 框架 或 导航 框架 等 。 使 用 固定 定位 的 元 素 可 以 脱离 页 面 ， 无 


论 页 面 如 何 滚动 ， 始 终 处 在 页 面 的 同一 位 置 上 。 
固定 定位 语法 格式 如 下 : 

position:fixed 

【 例 12.3】 实 例文 件 : ch12\12.3.html 


<html> 

<head> 
<title>CSSs 固 定 定位 </title> 
<style type="text/css">... 
专业 

padding:0; 

margin:0; 

1 

#fixedLayer { 

width:100px; 
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line-height:50px; 
background: #FC6; 
border:lpx solid #F90; 
position:fixed; 
left:10px; 
top:10px; 

} 

</style> 

</head> 

<body> 

<div id="fixedLayer"> 固 定 不 动 </div> 
<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 
<p> 我 动 了 </p> 

<p> 我 动 了 </p> 

<p> 我 动 了 </p> 
</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 12-3 所 示 ， 可 以 看 到 拉 到 滚动 条 时 ， 无 论 页 面 内 容 怎么 变化 ， 其 


黄色 框 “ 固 定 不 动 ”始终 处 在 页 面 左 上 角 项 部 。 


Oe -oxo “Bs 


图 12-3 固定 定位 


层 翅 顺序 z-index 


宽 


对 HTML 元 素 进 行 定位 时 ， 可 以 从 其 高 度 、 宽 度 和 深度 3 个 方面 入 手 ， 高 度 使 用 height、 
度 使 用 width、 深 度 使 用 z-index。z-index 用 来 设置 元 素 层 苔 的 次 序 ， 其 方法 是 每 个 元 素 指 定 


一 个 数字 ， 数 字 较 大 的 元 素 将 硬 加 在 数字 较 小 的 元 素 之 上 。 


z-index 语法 格式 如 下 : 
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z-index : auto | number 


其 参数 值 auto 表 示 遵 循 父 对 象 的 定位 ; number 是 一 个 无 单位 的 整数 值 ， 可 以 为 负 值 。 如 
果 两 个 决定 定位 元 素 的 z-index 属性 具有 相同 的 number 值 ， 则 依据 该 元 素 在 HTML 文 档 中 声明 
的 顺序 进行 层 二 。 如 果 绝 对 定位 的 元 素 没 有 指定 z-index 属性 ， 则 此 属性 的 naumber 值 为 正 数 
的 元 素 会 霹 加 在 该 元 素 之 上 ， 而 number 值 为 负数 的 对 象 在 该 元 素 之 下 。 如 果 将 参数 设置 为 
null， 可 以 消除 此 属性 。 该 属性 只 作用 于 position 的 属性 值 为 relative 或 absolute 的 对 象 ， 不 能 作 
用 在 窗口 组 件 上 。 


【 例 12.4】 实 例文 件 : ch12\12.4.html 


<html> 

<head> 

<title>z-index 使 用 </title> 

<style> 

#big { 
width:800px; 
height:220px; 
padding:6px; 
background-color:#999999; 
position:relative; 


} 

#Div1 { 
width:160px; 
height:80px; 
background-color:#FFD700; 
padding:6px; 
position:absolute; 
left:9px; 
top: 9px; 
z-index:6; 

} 

#Div2 { 
width:120px; 
height:80px; 
background-color:thistle; 
padding:6px; 
position:absolute; 

left:280px; 
top: 90px; 

z-index:4; 

} 

#Div3 { 
width:140px; 
height:80px; 
background-color:lightskyblue; 
padding:6px; 
position:absolute; 
Let>L5 0 
top:25px; 
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Z=index:57 
} 
</style> 
</head> 
<body> 
<div id="big"> 
<div id="Divl"><br> 
z-index 值 是 6 ; </div> 
<div id="Div2"><br> 
z-index 值 是 4 ; </div> 
<div id="Div3"><br> 
z-index 值 是 5 ; </div> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 12-4 所 示 ， 可 以 看 到 网 页 中 显示 了 3 个 层 ，3 个 层 中 数值 大 小 不 
同 ， 并 从 大 到 小 分 别 在 别 的 层 上 显示 。 


[© Er IE 


图 12-4 z-index 效果 显示 


ESEB 边 偏 移 属 性 


边 偏 移 属性 包含 left、right、top 和 bottom 属 性 。 所 谓 边 偏 移 属性 ， 就 是 用 来 描述 元 素 块 与 
包含 元 素 块 最 近 的 边线 之 间 的 偏 移 量 的 属性 。 其 中 left 描 述 元 素 块 最 左边 与 包含 其 边框 最 左边 
的 边线 的 距离 ， 如 果 lef 属 性 值 为 正 ， 则 会 偏 右 移 ， 如 果 为 负 ， 则 会 使 它 更 向 左 移 ， 甚 至 移出 
边线 。 其 他 依次 类 推 。 

left、right、top 和 bottom 4 个 属性 取 值 非常 相似 ， 这 里 以 left 为 例 介 绍 。left 语 法 格式 如 下 : 


left : auto | length 


上 面 参 数值 中 auto 表 示 系 统 自动 取 值 ，length 表 示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 
或 百分数 。 直 接 设 定数 值 用 来 设置 元 素 的 绝对 位 置 ， 一 旦 该 位 置 确定 ， 该 元 素 将 始终 处 于 页 
面 中 的 该 位 置 。 使 用 百分比 设置 元 素 位置 ， 是 相对 于 其 上 级 元 素 的 位 置 而 设 定 的 。 如 果 取 值 
为 auto， 则 在 定位 中 允许 元 素 刚 好 有 显示 其 内 容 所 需 的 宽度 及 高 度 ， 而 不 必 再 指明 宽度 及 高 
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度 的 值 了 。 
【 例 12.5】 实 例文 件 : ch12\12.5.html 


<html> 
<head> 
<title> 定 位 属性 </title> 
</head> 
<body> 
<div style="background-color: Black; width:200px; height:200px"> 
<p style=" position:relative; left:50%; right:0; top:50%; bottom:0; 
width:100px; height:100px; 
background-color:Red;">hello 
</p> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 12-5 所 示 ， 可 以 看 到 红色 正方 形 框 在 指定 位 置 显示 ， 其 底 侧 和 右 
侧 分 别 与 大 的 矩形 框 对 应 。 


SR 
Ee oAhi 2 p- ¢ x| EPR 


图 12-5 边 偏 移 效果 显示 


12.2 float 浮动 定位 


除了 使 用 position 进 行 定位 外 ， 还 可 以 使 用 float 定 位 。float 定 位 只 能 在 水 平方 向 上 定位 ， 
而 不 能 在 垂直 方向 上 定位 。float 属 性 表示 浮动 属性 ， 它 用 来 改变 元 素 块 的 显示 方式 。 
float 语 法 格式 如 下 : 


float : none | left |right 


float 属 性 值 如 表 12-3 所 示 。 
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表 12-3 float 属 性 值 


属性 值 说 明 

none 元 票 不 浮动 
left 浮动 在 左边 
right 浮动 在 右边 


实际 上 ， 使 用 foat 可 以 实现 两 列 布局 ， 也 就 是 让 一 个 元 素 在 左 浮动 ， 另 一 个 元 素 在 右 浮 
动 ， 并 控制 好 这 两 个 元 素 的 宽带 。 
【 例 12.6】 实 例文 件 : ch12\12.6.html 


<html> 
<head> 
<title>float 定 位 </title> 
<style> 
六 十 
padding:0px; 
margin:0px; 
} 
-big { 
width:600px; 
height:100px; 
margin:0 auto 0 auto; 
border:#332533 lpx solid; 


} 


.one { 
width:300px; 
height:20px; 
float:left; 


border:#996600 lpx solid; 
} 
.two { 
width:290px; 
height:20px; 
float:right; 
margin-left:S5px; 
display:inline; 
border:#FF3300 lpx solid; 
} 
</style> 
</head> 
<body> 
<div class="big"> 
<div class="one"> 
<p> 非 诚 勿 扰 </p> 
</div> 
<div class="two"> 
<p> 中 国 达 人 秀 </p> 


</div> 
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</div> 

</body> 

</html> 

在 IE9.0 中 浏览 效果 如 图 12-6 所 示 ， 可 以 看 到 显示 了 一 个 大 逢 形 框 ， 大 甜 形 框 中 存在 两 个 
小 的 矩形 框 ， 并 且 并 列 显示 。 


国 DNRFRINchI22.6himl PDP- OX 旺 fosE-* 
四国 送信 秀 


图 12-6 float 浮 动 布局 


使 用 float 属 性 不 但 改变 元 素 的 显示 位 置 ， 同 时 会 对 相 邻 内 容 造成 影响 。 定 义 了 float 属 性 
的 元 素 会 覆盖 在 其 他 元 素 上 ， 而 被 覆盖 的 区 域 将 处 于 不 可 见 状态 。 使 用 该 属性 能 够 实现 内 容 
环绕 图 片 的 效果 。 

如 果 不 想 让 float 下 面 的 其 他 元 素 浮动 环绕 在 该 元 素 周围 ， 可 以 使 用 CSS3 属 性 clear， 清 除 
这 些 浮 动 元 素 。 

clear 语 法 格式 如 下 : 

clear : none | left |right | both 

其 中 ，none 表 示人 允许 两 边 都 有 浮动 对 象 ，both 表 示 不 允许 有 浮动 对 象 ，left 表示 不 允许 左 
边 有 浮动 对 象 ，right 表 示 不 允许 右边 有 浮动 对 象 。 使 用 float 以 后 ， 在 必要 的 时 候 就 需要 通过 
clear 语 句 清除 float 带 来 的 影响 ， 以 免 出 现 “ 其 他 DIV 跟 着 浮动 ”的 效果 。 


了 2 ms /= 
12.3 overflow 溢 出 定位 


am 


如 果 元 素 框 被 指定 了 大 小 ， 而 元 素 的 内 容 不 适合 该 大 小 ， 例 如 元 素 内 容 较 多 而 元 素 框 显 
示 不 下 ， 此 时 可 以 使 用 溢出 属性 overflow 来 控制 这 种 情况 。 

overflow 语 法 格式 如 下 : 

overflow : visible | auto | hidden | scroll 


overflow 的 各 属性 值 及 其 说 明 如 表 12-4 所 示 。 
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表 12-4 overflow 属 性 值 


属性 值 说 明 

visible 车 内 容 溢出 ， 则 溢出 内 容 可 见 

hidden 车 内 容 溢 出 ， 则 溢出 内 容 隐藏 

scroll 保持 元 又 框 大 小 ， 在 框 内 应 用 滚动 条 显示 内 容 
auto 等 同 于 scroll， 它 表示 在 需要 时 应 用 滚动 条 


overflow 属 性 适用 于 以 下 情况 : 


当 元 素 有 负 边 界 时 。 

元 素 框 宽 于 上 级 元 素 内 容 区 ， 不 允许 换行 。 
元 素 框 宽 于 上 级 元 素 区 域 宽度 。 

元 素 框 高 于 上 级 元 素 区 域 高 度 。 

元 素 定 义 了 绝对 定位 。 

【 例 12.7】 实 例文 件 : ch12\12.7.html 


<html> 
<head> 
<title>overflow 属 性 </title> 
<style > 
div{ 
position:absolute; 
Color:#445633; 
height:200px; 
width: 30%; 
float:left; 
margin: Opx; 
padding: Opx; 
border-right: 2px dotted #cccccc; 
border-bottom: 2px solid #cccccc; 
padding-right: 10px; 
overflow:auto; 


} 
</style> 
</head> 
<body > 
<div> 
<p> 综 艺 节目 排名 </p><p>1 非诚勿扰 </p><p>2 康熙 来 了 </p> 
<p>3 快乐 大 本 营 </p><p>4 娱乐 大 风暴 </p><p>5 天 天 向 上 </p><p>6 爱情 连连 看 </p> 
<p>7 销 销 三 人 行 </p><p>8 我 们 约会 吧 </p> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 12-7 所 示 ， 可 以 看 到 在 一 个 元 素 框 显示 了 多 个 元 素 ， 拉 动 显示 的 
滚动 条 可 以 查看 全 部 元 素 。 如 果 overlow 设 置 的 值 为 hidden， 则 会 隐藏 多 余 元 素 。 
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eT 


网 


12-7 溢出 定位 


AR 


12:4 ” visibility 隐藏 定 位 


visibility 属 性 指定 是 否 显示 一 个 元 素 生 成 的 元 素 框 。 这 意味 着 元 素 仍 占据 其 本 来 的 空 
间 ， 不 过 可 以 完全 不 可 见 ， 即 设 定 元 素 的 可 见 性 。 
visibility 语 法 格式 如 下 : 


visibility : inherit | visible | collapse | hidden 


其 属性 值 如 表 12-5 所 示 。 


表 12-5 visibility 属 性 值 


collapse 主要 用 来 隐藏 表格 的 行 或 列 。 隐 藏 的 行 或 列 能 够 被 其 他 内 容 使 用 。 对 于 表 
格外 的 其 他 对 象 ， 其 作用 等 同 于 hidden 


如 果 元 素 visibility 属 性 的 属性 值 设 定 为 hidden， 表 现 为 元 素 隐藏 ， 即 不 可 见 。 但 是 ， 元 素 
不 可 见 ， 并 不 等 同 于 元 素 不 存在 ， 它 仍 会 占有 部 分 页 面 位 置 ， 影 响 页 面 的 布局 ， 就 如 同 可 见 
一 样 。 换 句 话说 ， 元 素 仍 然 处 于 页 面 中 的 位 置 上 ， 只 是 无 法 看 到 它 而 已 。 


【 例 12.8】 实 例文 件 : ch12\12.8.html 


<html> 
<head> 
<title>float 属 性 </title> 
<style type="text/css"> 
-Qivi{ 
padding:5px; 
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spBict{ 
float:left; 
padding:20px; 
visibility:visible; 
} 
hu 
font-weight:bold; 
text-align:center 
} 
</style> 
</head> 
<body> 
<h1> 插 花 </h1> 
<div class="div"> 
<div class="pic"> 
<img src="08.jpg" width=150px height=100px /> 
</div> 
<p> 插 花 就 是 把 花 插 在 瓶 、 盘 、 盆 等 容器 里 ， 而 不 是 栽 在 这 些 容器 中 。 所 插 的 花 材 ， 或 枝 、 或 花 、 
或 叶 ， 均 不 带 根 ， 只 是 植物 体 上 的 一 部 分 ， 并 且 不 是 随便 乱 插 的 ， 而 是 根据 一 定 的 构思 来 选材 ， 遵 循 一 定 
的 创作 法 则 ， 插 成 一 个 优美 的 形体 (造型 》， 借 此 表达 一 种 主题 ， 传 递 一 种 感情 和 情趣 ， 使 人 看 后 赏 心 悦 
目 ， 获 得 精神 上 的 美感 和 愉快 。 
</p> 
<p> 
在 我 国 插花 的 历史 源远流长 ， 发 展 至 今 已 为 人 们 日 常生 活 所 不 可 缺少 。 一 件 成 功 的 插花 作品 ， 并 不 
一 定 要 选用 名 贵 的 花 材 、 高 价 的 花 器 。 一 般 看 来 并 不 起 眼 的 一 片 绿叶 、 一 个 花蕾 ， 甚 至 路 边 的 野花 野草 和 
常见 的 水 果 、 蔬 菜 ， 都 能 插 出 一 件 令 人 赏心悦目 的 优秀 作品 来 ， 使 观赏 者 在 心灵 上 产 失 共鸣 的 是 创作 者 唯 
一 的 目的 。 如 果 不 能 产生 共鸣 ， 那 么 这 件 作品 也 就 失去 了 观赏 价值 。 具 体 地 说 ， 即 插花 作品 首先 要 在 视觉 
上 立即 引起 一 种 感 观 和 情感 上 的 自然 反应 ， 如 果 未 能 立刻 产生 反应 ， 那 么 摆 在 眼前 的 这 些 花 材 将 无 法 吸引 
观 者 的 目光 。 在 插花 作品 中 引起 观赏 者 情感 反应 的 要 素 有 三 点 : 一 是 创意 〈 或 称 立意 ) ， 指 的 是 表达 什么 主 
题 ， 应 选 什么 花 材 ， 二 是 构思 (或 称 构图 ) ， 指 的 是 这 些 花 材 怎样 巧妙 配置 造型 ， 在 作品 中 充分 展现 出 各 自 
的 美 : 三 是 插 器 ， 指 的 是 与 创意 相配 合 的 插花 器 血 。 三 者 有 机 配合 ， 作 品 便 会 给 人 以 美的 享受 。 
</p> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 12-8 所 示 ， 可 以 看 到 图 片 在 左边 显示 ， 并 被 文本 信息 所 环绕 。 此 
时 visibility 属 性 为 visible， 表 示 图 片 可 以 看 见 。 


播 花 就 是 把 花 插 在 种 、 盘 、 芝 等 客 吕 至 ， 而 不 是 销 
柜 、 或 花 、 或 时 ， 均 不 带 根 ， 只 是 民 物 体 上 的 一 部 分 
根据 一 定 的 构思 未 选 材 ， 开 尾 一 定 的 创作 法 则 ， 括 | 


> 和 种 主题 ， 苇 着 一 种 感 圭 和 情 撮 ， 使 人 看 后 : 


各 ， 指 的 是 前言 相 本 合 的 插花 基 四 = 三 者 有 机 本; 


图 12-8 隐藏 定 位 显示 
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人 5 块 和 行内 元 素 display 


在 网 页 设计 中 ， 根 据 需 要 可 以 将 p 段 落 设置 成 一 个 块 显示 ， 并 带 有 边框 ， 即 类 似 于 DIV 层 
的 效果 。 也 可 以 把 多 个 HTML 元素， 放 在 同一 行 显示 。 本 节 将 介绍 这 两 种 实现 方式 。 


[EE 块 元 素 


在 CSS3 中 可 以 通过 display 属 性 控制 元 素 显 示 ， 即 元 素 显 示 方 式 。 
diplay 语 法 格式 如 下 : 


display : block | none | inline | compact | marker | inline-table | list- 


item | run=inm | 


table |table-caption | table-cell | table-column | table- 


column-group | table-footer-group | table-header-group | table-row | table- 


row-group 


display 属 性 值 及 其 含义 如 表 12-6 所 示 。 


表 12-6 display 属 性 值 


属性 值 说 明 

block 以 块 元 票 方式 显示 

inline 以 内 联 元 系 方 式 显示 

none 元 条 隐藏 

list-item 以 列表 方式 显示 

compact CSS2 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 

二 CSS2 指 定 内容 在 容器 对 象 之 前 或 之 后 。 要 使 用 此 参数 ， 对 象 必须 和 :after 及 :before 伪 
元 条 一 起 使 用 

inline-table CSS2 将 表格 显示 为 无 前 后 换行 的 内 联 对 象 或 内 联 容器 

list-item CSS1 将 块 对 象 指定 为 列表 项 目 ， 并 可 以 添加 可 选项 目标 志 

run-in CSS2 分 配对 象 为 块 对 象 或 基于 内 容 之 上 的 内 联 对 象 


table 


CSS2 将 对 象 作为 块 元 系 级 的 表格 显示 


table-caption CSS2 将 对 象 作为 表格 标题 显示 
table-cell CSS2 将 对 象 作为 表格 单元 格 显示 
table-column CSS2 将 对 象 作为 表格 列 显示 
table-column-group | CSS2 将 对 象 作为 表格 列 组 显示 


table-header-group 


CSS2 将 对 象 作为 表格 标题 组 显示 


table-footer-group 


CSS2 将 对 象 作为 表格 脚注 组 显示 


table-row CSS2 将 对 象 作为 表格 行 显示 
table-row-group CSS2 将 对 象 作为 表格 行 组 显示 


display 属 性 的 


默认 值 为 block， 即 元 素 的 默认 显示 方式 是 以 块 元 素 方 式 显示 。 常 用 的 段落 


Pp、 标 题 h1、 表 单 form、 列 表 ul 和 列表 选项 li 都 可 以 定义 成 块 元 素 。 一 个 块 元 素 ， 其 行 高 、 顶 
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部 和 底部 都 是 可 控制 的 。 如 果 不 设置 宽度 的 话 ， 块 会 默认 为 整个 容器 的 100%; 如 果 设 定 了 


值 ， 


显示 大 小 由 值 决定 。 
【 例 12.9】 实 例文 件 : ch12\12.9.html 


<title> 块 元 素 </title> 
<style> 
-bigf{ 
width:800px; 
height:105px; 
background-image:url (07.jpg); 
上 


af 
font-size:12px; 
display:block; 
width:100px; 
height:20px; 
line-height:20px; 
background-color:#F4FAFB; 
text-align:center; 
text-decoration:none; 
border-bottom:1lpx dotted #6666FF; 

color:black; 

} 

a:hovert{ 
font-size:13px; 
display:block; 
width:100px; 
height:20px; 
line-height:20px; 
text-align:center; 
text-decoration:none; 

color:green; 


</style> 
</head> 
<body> 
<div class="big"> 
<p> 
<a href="#"> 管 理应 用 </a><a href="#"> 财 务 管理 </a><a href= 
<a href="#"> 客 户 关系 管理 </a><a href="#"> 一 体 化 管理 </a> 
</p> 
</div> 
</body> 


在 IE9.0 中 浏览 效果 如 图 12-9 所 示 ， 可 以 看 到 左边 显示 了 一 个 导航 栏 ， 右 边 显示 了 一 个 图 
3 航 栏 就 是 以 块 元 素 形式 显示 。 


> 在 线 管理 </a> 
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图 12-9 块 元 票 显示 


EA 行内 元 素 

当 display 的 值 被 设 定 为 inline 时 ， 可 以 把 元 素 设 置 为 行内 元 素 ， 并 在 浏览 器 中 同一 行 显 
示 。inline 元 素 决定 和 其 他 HTML 元 素 在 同一 行 上 ， 其 行 高 、 项 部 和 底部 边 距 可 以 改变 ， 而 宽 
度 是 不 可 以 改变 的 。 

【 例 12.10】 实 例文 件 ，ch12\12.10.html 


<html> 
<head> 
<title> 行 内 元 素 </title> 
<style type="text/css"> 
-hang { 
display:inline; 
} 
</style> 
</head> 
<body> 
<div> 
<a href="#" class="hang"> 这 是 a 标签 </a> 
<span class="hang"> 这 是 span 标 签 </span> 
<strong class="hang"> 这 是 strong 标 签 </strong> 
<img class="hang" src=6.jpg/> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 12-10 所 示 ， 可 以 看 到 页 面 显 示 的 4 个 HTML 元 素 ， 都 在 同一 行 显 
示 ， 包 括 超级 链接 、 文 本 信息 和 图 片 。 


re -cxJerms “人 CE 


| 这 二 丰登 这 是 span 标 签 这 是 strong 标 签 到 


图 12-10 行内 显示 
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12.6 ”综合 实例 一 一 定位 布局 新 闻 


一 个 美观 大 方 的 页 面 ， 必 然 是 一 个 布局 合理 的 页 面 。 左 右 布局 是 网 页 中 比较 常见 的 一 种 
方式 ， 即 根据 信息 种 类 不 同 ， 将 信息 在 当前 页 面 左右 侧 分 别 显示 。 本 实例 将 利用 前 面 学 习 的 
知识 ， 创 建 一 个 左右 布局 的 新 闻 页 面 ， 具 体 步骤 如 下 所 示 。 

分 析 需 求 。 

首先 需要 将 整个 页 面 分 为 左右 两 个 模块 ， 左 模块 放置 一 类 信息 ， 右 模块 放置 一 类 信息 ， 
可 以 设 定 其 宽度 和 高 度 。 实 例 完 成 后 ， 效 果 如 图 12-11 所 示 。 


[le 


CD own" p- ox a 
A EE 


女人 健康 
“办 人 导向 女 仁和 下 下 Htne 中 人 二 拓 的 10 全体 辐 19.8 
， 大 好 处 和 二 大 到 09:14 
个 大 对 于“ 梢 "入 19:51 


“美丽 帮忙: 别 让 大 泪 迪 fT 沟 邵 A037 “由 天 证 邦 9 种 营 关 是 最 要 的 全 芭 15.16 
谢 9 半 纺 再 六 衫 百 元 | “夏季 拓 生 树 丙 :“ 夫 雪 欧 ” 计 入 让 10.40 
“让 边 注 衣 禄 相 包 人" 月 这 术 4 “10 亲人 疗养 和 万 法 ， 尼 家 宅 人 的 养生 经 13 54 


图 12-11 左右 显示 信息 


思 创建 HTML 页 面 ， 实 现 基本 列表 。 


创建 HTML 页 面 ， 同 时 用 DIV 在 页 面 中 划分 左边 DIV 层 和 右边 DIV 层 两 个 区 域 ， 并 且 将 信 


息 放 入 到 相应 的 DIV 层 中 ， 注 意 DIV 层 内 引用 CSS 样 式 名 称 。 


<html> 

<head> 
<title> 布 局 </title> 
</head> 

<body> 

<center> 


<div class="big"> 

<p class=pp> 女 人 </p> 

<div class="]left"> 
<hl1> 女 人 </hl> 
<p> “男人 性 福 告白 : 女人 的 性 感 与 年 龄 成 正比 09:59 </p> 
<p> -六 类 食物 能 有 效 对 抗 紫外 线 11:15 </p> 
<p> .打造 夏美 人 受 oL 追 捧 的 清爽 发 型 10:05 </p> 
<p> -美丽 帮 帮 忙 : 别 让 大 油 脸 吓 跑 男人 09:47 </p> 
<p> -简约 雪 纺 清凉 衫 百 元 搭 出 欧美 范 儿 14:51 </p> 
<p> … 花 边 连 衣 裙 超 勾 人 7 月 穿 搭 出 新 意 11:04 </p> 

</div> 

<div class="right"> 
<h1> 健 康 </h1> 
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<p> -女性 养生 : 让 女人 老 得 快 的 10 个 原因 19:18 </p> 
<p> -养生 盘点 : 喝 豆 浆 的 九 大 好 处 和 七 大 禁忌 09:14</p> 
<p> -养生 警惕 : 14 个 护肤 心理 “ 错 ” 觉 19:57</p> 
<p> “柿子 番茄 骨 汤 8 种 营养 师 最 爱 的 食物 15:16</p> 
<p> -夏季 养生 指南 : “夫妻 菜 ” 宣 常 吃 10: 48 </p> 
<p> "10 条 食疗 养生 方法 ， 居 家 宅 人 的 养生 经 13:54 </p> 
</div> 

</div> 

</center> 

</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 12-12 所 示 ， 可 以 看 到 页 面 显 示 了 两 个 模块 ， 分 别 是 “女人 ”和 
“健康 ”， 二 者 上 下 排列 。 
添加 CSS 代 码 ， 修 饰 整体 样式 和 DIV 层 。 


<style> 

a 
padding:0px; 
margin:0px; 

}body { 
font:" 宋 体 "; 


font-size:12px; 


h 
.big{ 
width:570px; 
height:210px; 
border:#C1C4CD lpx solid; 
} 


</style> 


在 IE9.0 中 浏览 效果 如 图 12-13 所 示 ， 可 以 看 到 页 面 字体 比 原来 的 小 ， 并 且 大 的 DIV 显示 了 


Cin -dxj Sm er -| IE 
2 i 


“男人 人 各 自 ， 女 人 区 性 区 如 忆 TEHtp4:53 
“5 
“EA gn “a Ee 
和 
全 百 天 出 区 关东 4:51 
和 人 1 月 守 拉 11:04 


健康 
人 
A 
和 
TR He 
ee 
A 


| 


到 12-12 上 下 排列 图 12-13 修饰 束 体 样式 
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添加 CSS 代 码 ， 设 置 两 个 层 左右 并 列 显示 。 


国人 -本 局 
width:280px; 
float:right; // 设 置 右边 悬浮 
border:#C1C4CD lpx solid; 
}.right{ 
width:280px; 
float :left;// 设 置 左边 悬浮 
margin-left:6px; 
border:#C1C4CD lpx solid; 
} 


在 IE9.0 中 浏览 效果 如 图 12-14 所 示 ， 可 以 看 到 页 面 中 文本 信息 左右 并 列 显 示 ， 但 字体 没 
有 发 生变 化 。 


图 12-14 设置 左右 悬浮 


辆 添加 CSS 代 码 ， 定 义 文本 样式 。 
hli 

font-size:14px; 

padding-left:10px; 

background-color:#CCCCCC; 

height:20px; 

line-height:20px; 

}p{ 

margin:S5px; 

line-height:18px; 
Color:#2F17CD; 

}.pp{ 
width:570px; 
text-align:left; 
height:20px; 
background-color:D5E7FD; 
position:relative; 
left:—3px? 
top:-3px; 
font-size:16px; 
text—-decoration:underline; 
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在 IE9.0 中 浏览 效果 如 图 12-11 所 示 ， 可 以 看 到 页 面 中 文本 信息 左右 并 列 显 示 ， 其 字体 颜 
色 为 蓝 色 ， 行 高 为 18px。 


1227 专家 解 惑 


1. 抉 元 素 和 行内 元 素 的 概念 分 别 是 什么 ? 有 哪些 特点 ? 

块 级 元 素 和 行内 元 素 是 布局 最 基本 的 两 种 元 素 ， 常 见 块 级 元 素 有 div、p、form、ul、ol、 
li 等 ， 常 见 行内 元 素 有 span、strong、em 等 。 

块 级 元 素 会 独占 一 行 ， 对 应 于 display:block， 可 以 设置 width、height、margin、padding 属 
性 ， 行 内 元 素 不 独占 一 行 ， 对 应 于 display:inline， 相 邻 行 内 元 素 会 排列 在 同一 行 里 ， 直 到 排 不 
下 才 换 行 。 设 置 width、height 属 性 无 效 ， 而 margin 和 padding 属 性 只 对 设置 水 平方 向 的 right 和 
left 有 效 ， 可 以 通过 修改 display 属 性 来 切换 块 级 元 素 和 行内 元 素 。 

display:inline-block 是 行内 的 块 级 元 素 ， 拥 有 块 级 元 素 的 特点 ， 可 以 设置 width、height、 
margin、padding 值 ， 但 又 可 以 和 其 他 行内 元 素 排 在 同一 行 里 。 

2. 当 设 置 多 个 div 并 列 时 ， 为 什么 会 撑 破 整个 布局 ? 

很 多 时 候 ， 尤 其 是 容器 内 有 平行 布局 (如 两 三 个 float 的 div》 时 ， 宽 度 很 容易 出 现 问 题 。 
在 下 中， 人 外 层 的 宽度 会 被 内 层 更 宽 的 div 挤 破 。 一 定 要 用 Photoshop 或 者 Firework 量 取 像素 级 的 
精度 。 
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CSS3 盒 子 和 
DIV 布局 


本 章 引言 


在 传统 网 页 设计 中 ， 为 了 设 定 页 面 元 素 的 位 置 ， 经 常 使 用 表 
格 来 完成 。 表 格 起 到 了 定位 和 布局 的 作用 。 由 于 表格 布局 的 局 限 
性 ,目前 往往 采用 DIV+CSS3 方 式 。CSS3 中 提出 了 盒子 模型 和 
新 增 盒子 模型 来 完成 对 元 素 的 直接 定位 ， 即 能 够 为 页 面 元 素 定义 
边框 ， 并 修饰 内 容 距 离 ， 从 而 优化 文本 内 容 的 显示 效果 。 本 章节 
将 学 习 CSS3 盒 子 和 DIV 布局 的 方法 和 技巧 。 


人 ms 通 DIV+CSS3 网 页 布 忆 与 样式 


全 认识 div 层 


使 用 DIV 进行 网 页 排版 ， 是 现在 流行 的 一 种 趋势 。 例 如 ， 使 用 CSS3 属 性 可 以 轻易 设置 
DIV 位 置 ， 演 变 出 多 种 不 同 的 布局 方式 。 


层 在 HTML 布 局 应 用 


<div> 标 记 是 一 个 区 块 容器 标记 ， 在 <div></div> 标 记 中 可 以 放置 其 他 一 些 HTML 元 素 ， 例 
如 段落 <p>、 标 题 <hl>、 表 格 <table>、 图 片 <img> 和 表单 等 。 然 后 使 用 CSS3 相 关 属 性 将 div 容 
器 标记 中 的 元 素 作为 一 个 独立 对 象 进行 修饰 。 这 样 就 不 会 影响 其 他 HTML 元 素 。 


【 例 13.1】 实 例文 件 : ch13\13.1.html 


<html> 

<head> 

<title>div 层 </title> 

<style type="text/css"> 

i 

divi{ 
font-size:18px; 
font-weight:bolder; 
font-family:" 幼 圆 "; 
color:#FF0000; 
background-color:#eeddcc; 
text-align:center; 
width:300px; 
height:100px; 

border:lpx #992211 dotted; 


} 
--> 
</style> 
</head> 
<body> 
<center> 
<div> 
这 是 div 层 
</div> 
</center> 
</body> 
</html> 


上 面 例子 通过 CSS 对 div 块 进行 控制 ， 绘 制 了 一 个 div 容 器 ， 容 器 中 放置 了 一 段 文 字 。 
在 正 9.0 中 浏览 效果 如 图 13-1 所 示 ， 可 以 看 到 一 个 矩形 方块 的 div 层 ， 居 中 显示 ， 字 体 显示 
为 红色 ,边框 为 浅 红色 ， 背 景色 为 浅黄 色 。 
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图 13-1 div 层 显示 


《全 呈 div 和 spban 区 别 


对 于 初学 者 而 言 ，div 和 span 两 个 标记 常常 被 混淆 ， 因 为 大 部 分 的 div 层 都 可 以 使 用 span 标 
记 代替 ， 并 且 其 运行 效果 完全 一 样 ， 例 如 13.1.1 节 中 的 例子 ， 就 可 以 使 用 span 标 记 代 替 div 标 
记 ， 其 运行 效果 完全 一 致 。 可 以 这 样 说 ， 在 使 用 区 块 对 HTML 元 素 进行 包含 方面 ，div 和 span 
标记 作用 基本 一 样 。 

div 和 span 标 记 二 者 的 区 别 在 于 ，div 是 一 个 块 级 元 素 ， 其 包含 的 元 素 会 自动 换行 ，span 标 
记 是 一 个 行内 标记 ， 其 前 后 都 不 会 发 生 换 行 。div 标 记 可 以 包含 span 标 记 元 素 ， 但 span 标 记 一 
般 不 包含 div 标 记 。 


【 例 13.2】 实 例文 件 ，ch13\13.2.html 


<html> 

<head> 

<title>div 与 span 的 区 别 </title> 

</head> 

<body> 
<p>div 自 动 分 行 : </p> 
<div><b> 宁 静 </b></div> 
<div><b> 臻 远 </b></div> 
<div><b> 明 治 </b></div> 
<p>span 同 一 行 : </p> 
<span><b> 老 虎 </b></span> 
<span><b> 狮 子 </b></span> 
<span><b> 老 鼠 </b></span> 

</body> 

</html> 


在 IE9.0 中 浏览 效果 如 图 13-2 所 示 ， 可 以 看 到 div 层 所 包含 的 元 素 ， 进 行 自动 换行 ， 而 对 于 
span 标 记 ，3 个 HTML 元 素 在 同一 行 显示 。 


T 


13-2 div 和 span 比 较 


医 二 在 网 页 设计 中 ， 对 于 较 大 的 块 可 以 使 用 div 完 成 ， 而 对 于 具有 独特 样式 的 单独 HTML 元素， 可 以 
总 使 用 span 标 记 完 成 。 
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但 过 ”合子 模 型 


将 网 页 上 每 个 HTML 元素 视 为 长 方形 的 盒子 ， 是 网 页 设计 上 的 一 大 创新 。 在 控制 页 面 方 
面 ， 盒 子 模型 有 着 至 关 重 要 的 作用 ， 熟 练 掌握 盒子 模型 及 其 各 个 属性 ， 是 控制 页 面 中 每 个 
HTML 元 素 的 前 提 。 


什么 是 盒子 模型 


CSS3 中 ， 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 这 个 矩形 框 就 称 为 盒子 。 盒 子 描述 了 
元 素 及 其 属性 在 页 面 布 局 中 所 占 的 空间 大 小 ， 因 此 盒子 可 以 影响 其 他 元 素 的 位 置 及 大 小 。 例 
如 ， 页 面 中 第 一 个 盒子 为 10px， 那 么 下 一 个 盒子 就 处 于 离 顶部 10px 距 离 的 位 置 。 如 果 第 一 个 
盒子 增加 为 20px， 则 下 一 个 盒子 就 要 再 下 移 10px。 而 整个 页 面 就 是 由 这 些 大 大 小 小 但 不 会 重 
码 的 盒子 形成 的 。 

盒子 模型 是 由 margin (边界 ) 、border (边框 ) 、padding (空白 ) 和 content (内 容 ) 几 个 
属性 组 成 。 此 外 在 盒子 模型 中 ， 还 具备 高 度 和 宽度 两 个 辅助 属性 。 盒 子 模 型 如 图 13-3 所 示 。 


margin-top 


padding-top 


content 


padding-bottom 


margin-bottom 


图 13-3 盒子 模型 效果 
从 图 13-3 中 可 以 看 出 ， 盒 子 模型 包含 如 下 4 个 部 分 : 


content: 是 盒子 模型 中 必需 的 一 部 分 ， 可 以 是 文字 、 图 片 等 元 素 。 
padding: 也 称 内 边 距 或 补 白 ， 用 来 设置 内 容 和 边框 之 间 的 距离 。 
border: 可 以 设置 内 容 边 框 线 的 粗细 、 颜 色 和 样式 等 ， 前 面 已 经 接触 过 。 
margin: 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 


对 于 这 些 属性 可 以 把 它 转移 到 日 常生 活 中 的 盒子 〈 箱 子 ) 上 来 理解 ， 日 常生 活 中 所 见 的 
盒子 也 就 是 能 装 东西 的 一 种 箱子 ， 也 具有 这 些 属 性 ， 所 以 称 其 为 盒子 模式 。content 就 是 盒 
里 装 的 东西 ，padding 就 是 怕 盒 子 里 装 的 东西 〈 贵 重 的 ) 损坏 而 添加 的 泡沫 或 者 其 他 抗震 的 辅 
料 ，border 就 是 盒子 本 身 了 ，margin 则 说 明 盒子 摆 放 的 时 候 不 能 全 部 堆 在 一 起 ， 要 留 一 定 空隙 
保持 通风 ， 同 时 也 为 了 方便 取出 。 
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_ 杭 。 在 网 页 设计 上 ， 内 容 常 指 文 字 、 图 片 等 元 素 ， 但 是 也 可 以 是 小 金子 (DIV 贮 套 ) ， 与 现实 生活 
| 图 ” 中 金子 不 同 的 是 ， 现 实生 活 中 的 东西 一 般 不 能 大 于 念 子 ， 否 则 盒子 会 被 撑 坏 的 ， 而 CSS 念 子 具 
有 弹性 ， 里 面 的 东西 大 于 人 金子 本 身 时 它 会 被 撑 大 ， 但 不 会 被 损坏 。 


一 个 盒子 的 实际 高 度 〈 宽 度 ) 是 由 contenttpadding+border+tmargin 组 成 的 。 在 CSS3 中 ， 
可 以 通过 设 定 width 和 height 来 控制 content 的 大 小 ， 并 且 对 于 任何 一 个 合子， 都 可 以 分 别 设 定 4 
条 边 的 border、padding 和 margin。 


border 边 框 


border 边 框 是 内 边 距 和 外 边 距 的 分 界线 ， 可 以 分 离 不 同 的 HTML 元 素 ，border 的 外 围 是 元 
素 的 最 外 围 。 在 网 页 设计 中 ， 如 果 计 算 元 素 的 宽 和 高 则 需要 把 border 计 算 在 内 。 

border 有 3 个 属性 ， 分 别 是 边框 样式 〈style) 、 颜 色 (color) 和 宽度 (width) ， 这 些 内 容 
在 第 7 章 已 经 介绍 过 ， 这 里 就 不 再 重复 了 。 


【 例 13.3】 实 例文 件 : ch13\13.3.html 


<html> 
<head> 
<title>border 边 框 </title> 
<style type="text/css"> 
-divil{ 
borde-widthr:10px; 
border-color:#ddccee; 
border-style:solid; 
width:410px; 
} 
-div21{ 
border-width:1px; 
border-color:#adccdd; 
border-style:dotted; 
width:410px; 
} 
-div3{ 
border-width:1px; 
border-color:#457873; 
border-style:dashed; 
width:410px; 
} 
</style> 
</head> 
<body> 
<div class="divl"> 
这 是 一 个 宽度 为 10px 的 实 线 边框 。 
</div> 
<br /><br /> 
<div class="div2"> 


这 是 一 个 宽度 为 px 的 虚线 边框 。 
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</div> 
<br /><br /> 
<div class="div3"> 
这 是 一 个 宽度 为 1pzx 的 点 状 边框 。 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 13-4 所 示 ， 可 以 看 到 显示 了 3 个 不 同 风格 的 盒子 ， 第 一 个 盒子 边框 
线 宽度 为 10px， 边 框 样式 为 实 线 ， 颜 色 为 紫色 ， 第 二 个 盒子 边框 线 宽度 为 ]px， 边 框 样式 为 虚 
线 ， 颜 色 为 浅 绿色 ;第 三 个 盒子 边框 宽度 为 Ipx， 边 框 样式 是 点 状 ， 颜 色 为 绿色 。 


mmm Pp-exlew-ae 上 CE 
| ERT 9 


这 是 一 个 宽 委 为 i 的 天线 边 棋 。 


让 是 一 个 宽度 为 5s 的 点 杖 亡 民 。 


图 13-4 设置 盒子 边框 


让 这 里 需要 注意 的 是 ， 在 给 元 素 设置 background-color 背 景色 时 ，IE 作 用 的 区 域 为 
4 content+padding， 而 Firefox 则 是 content+padding+border。 这 点 在 border 为 粗 虚 线 时 特别 明显 。 


丁 玉 RR padding 内 边 距 


在 CSS3 中 ， 可 以 设置 padding 属 性 定义 内 容 与 边框 之 间 的 距离 ， 即 内 边 距 。 
其 语法 格式 如 下 : 


padding : length 


padding 属 性 值 可 以 是 一 个 具体 的 长 度 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 ， 但 不 可 
以 使 用 负 值 。 当 设置 值 为 百分数 时 ， 百 分 数值 是 相对 于 其 父 元 素 的 width 计算 的 ， 这 一 点 与 外 
边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 其 值 也 会 改变 。 

padding 属 性 能 为 盒子 定义 上 、 下 、 左 、 右 间隙 的 宽度 ， 也 可 以 单独 定义 各 方位 的 宽度 。 
常用 形式 如 下 : 


padding :padding-top | padding-right | padding-bottom padding-left 


如 果 提供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 4 条 边 。 如 果 只 提供 1 个 参数 值 ， 将 作用 
于 全 部 的 4 条 边 ， 如 果 提 供 2 个 ， 第 1 个 作用 于 上 下 两 边 ， 第 2 个 作用 于 左右 两 边 ， 如 果 提供 3 
个 ， 第 1 个 作用 于 上 边 ， 第 2 个 作用 于 左 、 右 两 边 ， 第 3 个 作用 于 下 边 。 

padding 子 属性 及 其 含义 如 表 13-1 所 示 。 
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表 13-1 padding 子 属性 


属性 描述 

padding-top 设 定 上 间隙 
padding-bottom 设 定 下 间 阶 
padding-left 设 定 左 间隙 
padding-right 设 定 右 间 阶 


【 例 13.4】 实 例文 件 : ch13\13.4.html 


<html> 
<head> 
<title>padding</title> 
<style type="text/css"> 
-waif 
width:400px; 
height:250px; 


border:lpx #993399 solid; 


Fk 
img{ 
max-height:120px; 
padding-left:50px; 
padding-top:20px; 
k 
</style> 
</head> 
<body> 
<div class="wai"> 
<img src="13.jpg" /> 


<p> 这 张 图 片 的 左 内 边 距 是 50px， 顶 内 边 距 是 20px</p> 


</div> 
</body> 
</html> 


在 Firefox 5.0 中 浏览 效果 如 图 
片 可 以 看 做 一 个 盒子 模型 ， 并 定义 了 图 
其 实 是 对 象 img 和 外 层 div 之 间 的 距离 。 


Jnaddine 一 
文件 包 入 各 国 


| Dv 


13-5 所 示 ， 可 以 看 到 一 个 div 


Mozilla Firefox 


层 中 ， 显 示 了 一 个 图 


片 。 此 图 


片 的 左 内 边 距 和 上 内 边 距 的 效果 。 可 以 看 上 


el 


查看 外 历史) 书 蔡 如 工具 C) 大助 加 


“a 


图 13-5 设置 内 边 距 


， 内 边 距 
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人 开光 Z_ margin 外 边 距 


margin 边 界 用 来 设置 页 面 中 元 素 和 元 素 之 间 的 距离 ， 即 定义 元 素 周围 的 空间 范 
面 排版 中 一 个 比较 重要 的 概念 。 
其 语法 格式 如 下 : 


二 
并 
p=]| 


margin : auto length 

其 中 ，auto 表 示 根 据 内 容 自动 调整 ，length 表 示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 
百分数 。 百 分 数 是 基于 父 对 象 的 高 度 。 对 于 内 联 对 象 来 说 ， 左 右 外 延边 距 可 以 是 负数 值 。 

margin 属 性 包含 的 4 个 子 属 性 控制 一 个 页 面 元 素 的 四 周 的 边 距 样 式 ， 如 表 13-2 所 示 。 


表 13-2 margin 子 属性 


属性 描述 

margin-top 设 定 上 边 距 
margin-bottom 设 定 下 边 距 
margin-left 设 定 左边 距 
margin-right 设 定 右 边 距 


各 子 属性 的 属性 值 同样 可 以 是 一 个 确定 的 长 度 ， 也 可 以 是 一 个 百分比 ， 该 百分比 是 相对 


于 其 上 级 元 素 的 宽度 (width) 。 

在 给 margin 设 置 值 时 ， 如 果 提 供 4 个 参数 值 ， 将 按 顺 时 针 的 顺序 作用 于 4 条 边 ;， 如果 只 提 
供 1 个 参数 值 ， 将 作用 于 全 部 的 4 条 边 ; 如 果 提供 2 个 ， 第 1 个 作用 于 上 下 两 边 ， 第 2 个 作 
左右 两 边 ， 如 果 提 供 3 个 ， 第 1 个 作用 于 上 边 ， 第 2 个 作用 于 左 、 右 两 边 ， 第 3 个 作用 于 下 边 。 

如 果 希 望 很 精确 地 控制 块 的 位 置 ， 需 要 对 margin 有 更 深入 的 了 解 。margin 设 置 可 以 分 为 
行内 元 素 块 之 间 设置 、 非 行内 元 素 块 之 间 设 置 和 父子 块 之 间 设置 。 

1. 行内 元 素 margin 设 置 


【 例 13.5】 实 例文 件 : ch13\13.5.html 


<html> 
<head> 
<title> 行 内 元 素 设置 nargin</title> 
<style type="text/css"> 
一 
spant{ 
background-color:#a2d2ff; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:lpx #ddeecc solid; 
} 
span.left{ 
margin-right:20px; 
background-color:#a9d6ff; 
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} 
span.right{ 
margin-left:20px; 
background-color:#eeb0b07 
} 
一 -> 
</style> 
</head> 
<body> 
<span class="left"> 行 内 元 素 1</span><span class="right"> 行 内 元 素 2</span> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 13-6 所 示 ， 可 以 看 到 一 个 蓝 色 盒子 和 红色 盒子 ， 两 者 之 间 的 距离 
使 用 margin 设 置 ， 其 距离 是 左边 盒子 的 右边 距 margin-right 加 上 右边 盒子 的 左边 距 margin-left。 


| 


图 13-6 设置 外 边 距 


2. 非 行内 元 素 块 之 间 margin 设 置 
如 果 不 是 行内 元 素 ， 而 是 产生 换行 效果 的 块 级 元 素 ， 情 况 就 会 发 生变 化 。 两 个 换行 块 级 
元 素 之 间 的 距离 不 再 是 margin-bottom 和 margin-top 的 和 ， 而 是 两 者 中 的 较 大 者 。 


【 例 13.6】 实 例文 件 : ch13\13.6.html 


<html> 
<head> 
<title> 块 级 元 素 的 margin</title> 
<style type="text/css"> 
区 
hi{ 
background-color:#ddeecc; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
padding:10px; 
border:lpx #445566 solid; 
display:block; 


} 
三 = 关 
</style> 
</head> 
<body> 
<hl style="margin-bottom:50px; "> 距离 下 面 块 的 距离 </h1> 
<hl style="margin-top:30px;"> 距 离 上 面 块 的 距离 </h1> 
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</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 13-7 所 示 ， 可 以 看 到 两 个 hl 盒子 ， 两 者 上 下 之 间 存 在 距离 ， 其 距 


离 为 margin-bottom 和 margin-top 中 较 大 的 值 ， 即 50px。 如 果 修 改 下 面 hl 盒子 元 素 的 margin-top 
为 40px， 会 发 现 执行 结果 没有 任何 变化 。 如 果 其 值 修改 为 60px， 会 发 现下 面 的 盒子 会 向 下 移 
动 10px。 


¢ Se 


图 13-7 设置 上 下 margin 距 离 


3. 父子 块 之 间 margin 设 置 
当 一 个 div 块 包含 在 另 一 个 div 块 中 间 时 ， 二 者 便 会 形成 一 个 典型 的 父子 关系 。 其 中 子 块 


的 margin 设 置 将 会 以 父 块 的 content 为 参考 。 


【 例 13.7】 实 例文 件 : ch13\13.7.html 


<html> 
<head> 
<title> 包 含 块 的 margin</title> 
<style type="text/css"> 
< 
divt{ 
background-color:#fffebb; 
padding:10px; 
border:lpx solid #000000; 
} 
hif{ 
background-color:#a2d2ff; 
margin-top:0px; 
margin-bottom: 30px; 
padding:15px; 
border:lpx dashed #004993; 
text-align:center; 
font-family:" 幼 圆 "; 
font-size:12px; 
下 
一 -> 
</style> 
</head> 
<body> 
<div > 
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<h1> 子 块 div</h1> 
</div> 
</body> 
</html> 


在 IE9.0 中 浏览 效果 如 图 13-8 所 示 ， 可 以 看 到 子 块 hl 盒子 距离 父 div 下 边界 为 40px〈 子 块 
30px 的 外 边 距 加 上 父 块 10px 的 内 边 距 ) ， 其 他 3 边 距 离 都 是 父 块 的 padding 距 离 ， 即 10px。 


图 13-8 设置 包括 盒子 的 margin 距 离 


在 上 例 中 ， en a 并 且 父 块 高 度 值 小 于 子 块 的 高 度 加 上 
margin 的 值 ， 此 时 下 浏览 器 会 自动 扩大 ， 保 持 子 元 素 的 margin-bottom 的 空间 以 及 父 元 素 的 
padding-bottom。 而 Firefox 就 不 会 这 样 ， 会 保证 父 元 素 的 height 高 度 的 完全 吻合 ， 而 这 时 子 元 
素 将 超过 父 元 素 的 范围 。 

当 将 margin 设 置 为 负数 时 ， 会 使 得 被 设 为 负数 的 块 向 相反 的 方向 移动 ， 甚 至 覆盖 在 另外 
的 块 上 。 


13.3 CSS3 新 增 弹性 盒子 模型 


CSS3 引 入 了 新 的 盒子 模型 处 理 机 制 ， 即 弹性 盒子 模型 。 该 模型 决定 元 素 在 盒子 中 的 分 布 
方式 以 及 如 何 处 理 盒子 的 可 用 空间 。 通 过 弹性 盒子 模型 ， 可 以 轻松 地 设计 出 自 适应 浏览 器 窗 
的 流动 布局 或 自 适应 字体 大 小 的 弹性 布局 。 


CSS3 为 弹性 盒子 模型 新 增 了 8 个 属性 ， 如 表 13-3 所 示 。 
表 13-3 CSS3 新 增 盒子 模型 属性 

属性 说 明 
box-orient 定义 盒子 分 布 的 坐标 轴 
box-align 定义 子 元 票 在 盒子 内 垂直 方向 上 的 空间 分 配方 式 
box-direction 定义 盒子 的 显示 顺序 
box-flex 定义 子 元 票 在 盒子 内 的 自 适应 尺寸 
box-flex-group 定义 自 适应 子 元 标 群 组 
box-lines 定义 子 元 又 分 布 显示 
box-ordinal-group 定义 子 元 系 在 盒子 内 的 显示 位 置 
box-pack 定义 子 元 票 在 盒子 内 的 水 平方 向 上 的 空间 分 配方 式 
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天 马 遇 合子 布局 取向 box-orient 
box-orient 属 性 用 于 定义 盒子 元 素 内 部 的 流动 布局 方向 ， 即 横 排 还 是 坚 排 。 


其 语法 格式 如 
box-orient:horizontal | vertical | inline-axis | block-axis | inherit 
其 属性 值 含义 如 表 13-4 所 示 。 


表 13-4 box-orient 属 性 值 


7 


说 明 


[horizontal 盒子 元 系 从 左 到 右 在 一 条 水 平 线 上 显示 它 的 子 元 系 
[vertical 盒子 元 系 从 上 到 下 在 一 条 垂直 线 上 显示 它 的 子 元 系 


盒子 元 系 沿 着 内 联 轴 显 示 它 的 子 元 系 


弹性 盒子 模型 是 W3C 标 准 化 组 织 于 2009 年 发 布 的 ， 目 前 还 没有 主流 浏览 器 对 其 支持 ， 
采用 Webkit 和 Mozilla 演 染 引擎 的 浏览 器 都 自 定义 了 一 套 私 有 属性 ， 用 来 支持 弹性 盒子 模 


。 下 面 的 代码 中 会 存在 一 些 Firefox 浏 览 器 的 私有 属性 定义 。 


区 六 


【 例 13.8】 实 例文 件 : ch13\13.8.html 


<html> 
<head> 
<title>box-orient</title> 
<style> 
div{height:50px;text-align:center;} 
.dl{background-color:#F6F;width:180px;height:500px} 
.d2{background-color:#3F9;width:600px;height:500px} 
.d3{background-color:#FCd;width:180px;height:500px} 
bodyl{ 
display:box;/* 标 准 声 明 ， 盒 子 显示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
orient:horizontal;/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
box-orient:horizontal;/*CSS3 标 准 化 设置 */ 
} 
</style> 
</head> 
<body> 
<div class=d1> 左 侧 布局 </div> 
<div class=d2> 中 间 布 局 </div> 
<div class=d3> 右 侧 布局 </div> 
</body> 
</html> 


上 面 代码 中 ，CSS 样 式 首先 定义 了 每 个 div 层 的 背景 色 和 大 小 ， 在 body 标 记 选 择 器 中 ， 定 
body 容 器 中 元 素 以 盒子 模型 显示 ， 并 使 用 box-orient 定 义 元 素 水 平 并 列 显示 。 
在 Firefox 5.0 中 浏览 效果 如 图 13-9 所 示 ， 可 以 看 到 显示 了 3 个 层 ，3 个 div 层 并 列 显示 ， 分 
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别 为 “ 左 侧 布 局 ”、“ 中 间 布 局 ”和 “ 右 侧 布局 ”。 


- Norilla Firefox 

文件 四 编 加 时 查看) 历史 到 ) 书签 @@ ”工具 中 ”帮助 名 
€ | fe://P:/lizi/ehl3/13.8. hnl 

也 hbo 


[Te 


中 间 布 局 


图 13-9 盒子 元 票 水 平 并 列 显示 


盒子 布局 顺序 box-direction 


box-direction 是 用 来 确定 子 元 素 的 排列 顺序 ， 也 可 以 说 是 内 部 元 素 的 流动 顺序 。 
其 语法 格式 如 下 : 


box-direction:normal | reverse | inherit 


其 属性 值 如 表 13-5 所 示 。 


表 13-5 box-direction 属 性 值 


正常 显示 顺序 ， 即 如 果 盒 子 元 对 的 box-orient 属 性 值 为 horizontal， 则 其 包含 的 子 元 对 按照 从 左 
到 右 的 顺序 显示 ， 也 即 每 个 子 元 系 的 左边 总 是 靠近 前 一 个 子 元 系 的 右边 ， 如 果 盒 子 元 到 的 box- 


orient 属 性 值 为 vertical， 则 其 包含 的 子 元 系 按 照 从 上 到 下 的 顺序 显示 
反 向 显示 ， 盒 子 所 包含 的 子 元 系 的 显示 顺序 将 与 onmal 相 反 
继承 上 级 元 系 的 显示 顺序 


【 例 13.9】 实 例文 件 : ch13\13.9.html 


<html> 
<head> 
<title>box-direction</title> 
<style> 
div{height:50px;text-align:center;} 
.dl{background-color:#F6F;width:180px;height:500px} 
.d2{background-color:#3F9;width:600px;height:500px} 
.d3{background-color:#FCd;width:180px;height:500px} 
body{ 
display:box;/* 标 准 声 明 ， 盒 子 显示 */ 
display:-moz-box;i/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
orient:horizontal;/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
box-orient:horizontal; /*css3 标 准 声明 */ 
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-moz-box-direction:reverse; 
box-direction:reverse; 


} 

</style> 

</head> 

<body> 

<div class=d1> 左 侧 布 局 </div> 
<div class=d2> 中 间 布 局 </div> 
<div class=d3> 右 侧 布局 </div> 
</body> 

</html> 


可 以 发 现 此 实例 代码 和 上 一 个 实例 代码 基本 相同 ， 只 不 过 多 了 一 个 box-direction 属 性 设 


置 ， 此 处 设置 布局 进行 反 向 显示 。 
在 Firefox 5.0 中 浏览 效果 如 图 13-10 所 示 ， 可 以 发 现 与 上 一 个 图 形 相 比较 ， 左 侧 布局 和 右 


侧 布 局 进行 了 互 换 。 


图 13-10 盒子 布局 顺序 设置 


k 尼 到 攻 ”例子 布局 位 置 box-ordinal-group 


box-ordinal-group 属 性 设置 盒子 中 每 个 子 元 素 在 盒子 中 的 具体 位 置 。 

其 语法 格式 如 下 : 

box-ordinal-group:<integer> 

参数 值 integer 是 一 个 自然 数 ， 从 1 开始 ， 用 来 设置 子 元 素 的 位 置 序号 。 子 元 素 将 根据 这 
个 属性 从 小 到 大 进行 排列 。 在 默认 情况 下 ， 子 元 素 将 根据 元 素 的 位 置 进 行 排列 。 如 果 不 知道 
box-ordinal-group 属 性 值 的 子 元 素 ， 则 其 序号 都 默认 为 1， 并 且 序 号 相同 的 元 素 将 按照 它们 在 
文档 中 加 载 的 顺序 进行 排列 。 

【 例 13.10】 实 例文 件 : ch13\13.10.html 


<html> 

<head> 
<title>box-ordinal-group</title> 
<style> 
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body{ 
margin:0; 
padding:0; 
text-align:center 
background-color:#d9bfe8; 
} 
-box{ 
margin:auto; 
text-align:center; 
width:988px; 
display:-moz-box; 
display:box; 
box-orient:vertical; 
-moz-box-orient:vertical; 


.boxl{ 
-moz-box-ordinal-group:27 
box-ordinal-group:2; 
Box 
-moz-box-ordinal-group:3; 
box-ordinal-group:3; 
.box31{ 
-moz-box-ordinal-group:1; 
box-ordinal-group:1; 
.box4{ 
-moz-box-ordinal-group:4; 
box-ordinal-group:4; 
</style> 
</head> 
<body> 


<div class=box> 

<div class=boxl><img src=1.jpg/></div> 
<div class=box2><img src=2.jpg/></div> 
<div class=box3><img src=3.jpg/></div> 
<div class=box4><img src=4.jpg/></div> 
</div> 

</body> 

</html> 
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在 上 面 的 样式 代码 中 ， 类 选择 器 box 中 代码 display:box 设 置 了 容器 以 盒子 模型 显示 ，box- 
orient:vertical 代 码 设置 排列 方向 从 上 到 下 。 在 下 面 的 box1、box2、box3 和 box4 类 选择 器 中 通 


过 box-ordinal-group 属 性 都 设置 了 显示 顺序 。 


在 Firefox 5.0 中 浏览 效果 如 图 13-11 所 示 ， 可 以 看 到 第 三 个 层次 显示 在 第 一 个 和 第 二 个 层 


次 之 上 。 
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图 13-11 设置 层 显示 顺序 


盒子 弹性 空间 box-flex 


box-flex 属 性 能 够 灵活 地 控制 子 元 素 在 盒子 中 的 显示 空间 。 显 示 空 间 包括 子 元 素 的 宽度 和 


高 度 ， 而 不 只 是 子 元 素 所 在 栏目 的 宽度 ， 也 可 以 说 是 子 元 素 在 盒子 


其 语法 格式 如 下 : 


box-flex:<number> 


h 所 占 的 面积 。 


number 属 性 值 是 一 个 整数 或 者 小 数 。 当 盒子 中 包含 多 个 定义 了 box-flex 属 性 的 子 元 素 时 ， 


浏览 器 将 会 把 这 些 子 元 素 的 box-flex 属 性 值 相 加 ， 然 后 根据 它们 各 


盒子 剩余 的 空间 。 


的 值 占 总 值 的 比例 来 分 配 


提 。 box-flex 属 性 只 有 在 盒子 拥有 确定 的 空间 大 小 时 才能 够 正确 解析 ， 即 为 盒子 定义 具体 的 width 和 


L height 属 性 值 。 


【 例 13.11】 实 例文 件 : ch13\13.11.html 


<html> 

<head> 
<title>box-flex</title> 
<style> 

bodyt{ 

margin:0; 
padding:0; 
text-align:center; 
} 

.boxt{ 

height:50px; 
text-align:center; 
width:960px; 
overflow:hidden; 


display:box;/* 标 准 声 明 ， 盒 子 显示 */ 


display:-moz-box;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
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orient:horizontal;V/* 定 义 元 素 为 盒子 显示 */ 
-mozbox-box-orient:horizontal7/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
box-orient:horizontal;/*css3 标 准 声明 */ 


} 
sqrt 
background-color:#F6F; 
width:180px; 
height:500px; 
上 
ad2r :03{ 

border:solid lpx #CCC7 

margin:2px; 
} 
sd2f 
-moz-bozx-flex:2; 
box-flex:2; 
background-color:#3F9; 
height:500px; 
} 
ad3{ 
-moz-box-flex:4; 
box-flex:4; 
background-color:#FCd; 
height:500px; 
} 


.d2 div,.d3 div{display:inline;} 


</style> 

</head> 

<body> 

<div class=box> 

<div class=d1> 左 侧 布局 </div> 
<div class=d2> 中 间 布 局 </div> 
<div class=d3> 右 侧 布局 </div> 
</div> 

</body> 

</html> 


上 面 CSS 样 式 代 码 中 ， 使 用 display:box 语 句 设 定 容器 内 元 素 以 盒子 方式 布局 ，box- 


orient:horizontal 语 句 设 定 盒 子 之 间 在 水 平方 向 上 并 列 显示 ， 类 选择 器 dl 中 使 


定 显示 层 的 大 小 ， 而 在 d2 和 d3 中 ， 使 用 box-flex 分 别 设 定 两 个 盒子 显示 面积 。 


在 Firefox 5.0 中 浏览 效果 如 图 13-12 所 示 ， 可 以 看 到 左 侧 布 


box-flex ~ Eozilla Firefox 


文件 如 ”编辑 E) 查看 GD) 历史 GG) 书签 @@ 工具 WD 帮助 0D 


width 和 height 设 


局 所 占 空间 比 中 间 布 局 较 大 。 


ke | sae:7P:Aiziyehla/l3 HL-htm 


图 13-12 设置 盒子 面积 
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展 尖 尖 和 ”管理 盒子 空间 box-pack 和 box-align 


当 弹 性 元 素 和 非 弹 性 元 素 混合 排版 时 ， 可 能 会 出 现 所 有 子 元 素 的 尺寸 大 于 或 小 于 盒子 的 
尺寸 ， 从 而 出 现 盒子 空间 不 足 或 者 富余 的 情况 ， 这 时 就 需要 一 种 方法 来 管理 盒子 的 空间 。 如 
果子 元 素 的 总 尺寸 小 于 盒子 的 尺寸 ， 则 可 以 使 用 box-align 和 box-pack 属 性 进行 管理 。 

box-pack 属性 可 以 用 于 设置 子 容器 在 水 平 轴 上 的 空间 分 配方 式 ， 语 法 格式 如 下 : 


box-pack:startlend|lcenter|justify 


其 属性 值 含义 如 表 13-6 所 示 。 
表 13-6 box-pack 属 性 值 
属性 值 说 明 
start 所 有 子 容器 都 分 布 在 父 容器 的 左 侧 ， 右 侧 留 空 


laaa | 所 有 子 容器 都 分 布 在 父 容器 的 右 侧 ， 左 侧 留 空 


所 有 子 容器 平均 分 布 (默认 值 ) 


平均 分 配 父 容器 剩余 的 空间 (能 压缩 子 容器 的 大 小 ， 并 且 有 全 局 居中 的 效果 》 
box-align 属性 用 于 管理 子 容器 在 竖 轴 上 的 空间 分 配方 式 ， 语 法 格式 如 下 : 
box-align: startlend|center|baseline|stretch 


其 属性 值 含义 如 表 13-7 所 示 。 


表 13-7 box-align 属 性 值 
说 明 
子 容器 从 父 容器 顶部 开始 排列 ， 富 余 空 间 显示 在 盒子 底部 
[end | 子 容器 从 父 容器 底部 开始 排列 ， 富 余 空 间 显示 在 盒子 顶部 


| center ”| 子 容器 横向 居中 ， 富 余 空 间 在 子 容器 两 侧 分 配 ， 上 面 一 半 下 面 
所 有 盒子 沿 着 它们 的 基线 排列 ， 富 余 的 空间 可 前 可 后 显示 
stretch 每 个 子 元 系 的 高 度 被 调整 到 适合 盒子 的 高 度 显 示 ， 即 所 有 子 容器 和 父 容器 保持 同一 高 度 


【 例 13.12】 实 例文 件 ，ch13\13.12.html 


<html> 
<head> 
<title>box-pack</title> 
<style> 
body,html{ 
height:100%; 
width:100%; 
} 
body{ 
margin:0; 
padding:0; 
display:box7/* 标 准 声明 ， 盒 子 显 示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
-mozbox-box-orient:horizontal7/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
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box-orient:horizontal; /*css3 标 准 声 明 */ 
-moz-box-pack:center7 


box-pack:center; 


-moz-box-align:center; 


box-align:center; 
background:#04082b url(a.jpg) no-repeat top center; 


h 

-box{ 

border:solid lpx red; 
padding:4px; 

} 

</style> 

</head> 

<body> 

<div class=box> 
<img src=yueji.jpg> 
</div> 

</body> 

</html> 


上 面 代码 中 ，display:box 语 句 定义 容器 内 元 素 以 盒子 模型 显示 ，box-orient:horizontal 定 义 
盒子 水 平 显示 ，box-pack:center 定 义 盒子 两 侧 空间 平均 分 配 ，box-align:center 定 义 盒子 上 下 两 
侧 空间 平均 分 配 ， 即 图 片 盒子 居中 显示 。 


在 Firefox 5.0 中 浏览 效果 如 图 


13-13 所 示 ， 可 以 看 到 中 间 盒 子 在 容器 中 部 显示 。 


图 13-13 设置 盒子 中 间 显 示 


天 下 光 空间 溢出 管理 box-lines 


弹性 布局 


盒子 内 的 元 素 很 容易 出 现 空 间 溢 出 的 现象 ， 与 传统 的 盒子 模型 一 样 ，CSS3 人 允许 


使 用 overtlow 属 性 来 处 理 溢 出 内 容 的 显示 。 当 然 还 可 以 使 用 box-lines 属 性 来 避免 空间 溢出 的 问题 。 


7 


其 语法 格式 如 下 : 


box-lines:singlelmultiple 


其 中 ，single 表 示 子 元 素 都 单行 或 单列 显示 ，multiple 表 示 子 元 素 可 以 多 行 或 多 列 显示 。 
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【 例 13.13】 实 例文 件 : ch13\13.13.html 


<html> 
<head> 
<title>box-lines</title> 
<style> 
-box{ 
border:solid lpx red; 
width:600px; 
height:400px; 
display:box;/* 标 准 声明 ， 盒 子 显示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
-moz-box-orient:horizontal;/* 兼 容 Mozilla Gecko 引 擎 浏览 器 */ 
-moz-box-lines:multiple; 
box-lines:multiple; 
} 
.box div{ 
margin:4px; 
border:solid lpx #aaa; 
-moz-box-flex:1; 
box-flex:1; 
} 
.box div img{widthl20px;} 
</style> 
</head> 
<body> 
<div class=box> 
<div><img src="b.jpg"></div> 
<div><img src="c.jpg"></div> 
<div><img src="d.jpg"></div> 
<div><img src="e.jpg"></div> 
<div><img src="f.jpg"></div> 
</div> 
</body> 


在 Firefox 5.0 中 浏览 效果 如 图 13-14 所 示 ， 可 以 看 到 右边 盒子 还 是 发 生 了 溢出 现象 。 这 是 


因为 目前 各 大 主流 浏览 器 还 没有 明确 支持 这 种 用 法 ， 所 以 导致 box-lines 
示 无 效 。 相 信和 在 未 来 的 一 段 时 间 内 ， 各 个 浏览 器 会 支持 该 属性 。 


到 13-14 溢出 管理 


属性 被 实际 应 用 时 显 
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13.4 ”综合 实例 1 一 一 图 文 排版 效果 


一 个 宣传 页 需要 包括 文字 和 图 片 信息 。 本 实例 将 结合 前 面 学 习 的 盒子 模型 及 其 相关 属 
性 ， 创 建 一 个 旅游 宣传 页 ， 具 备 步 骤 如 下 所 示 。 

四 分 析 需 求 。 

整个 宣传 页 面 需要 一 个 div 层 包含 并 带 有 边框 ，DIV 层 包括 两 个 部 分 ， 上 部 空间 包含 一 
个 图 片 ， 下 面 显示 文本 信息 并 带 有 底 边 框 ， 下 部 空间 显示 两 张 图 片 。 实 例 完成 后 ， 效 果 如 图 
13-15 所 示 。 

辆 构建 HTML 页 面 ， 使 用 DIV 搭建 框架 。 


<html> 
<head> 
<title> 图 文 排版 </title> 
</head> 
<body> 

<div class="big"> 


<div class="up"> 
<img src="top.jpg" border="0" /> 
<p>* 反 季 游 正 流行 众 信 旅 游 暑 期 邀 你 到 南半球 过 冬 </p> 
<p> 西安 世 园 会 暨 旅游 推介 会 今日 在 沈阳 举行 ! </p> 
<p> “澳大利亚 旅游 局 中 国 区 首 代 邓 李 宝 茵 八 月 底 卸 任 </P> 
> “彩虹 部 落 ” 土族 :旅游 经 济 支撑 下 的 文化 记忆 恢复 (组 图 ) </p> 
</div> 
<div class="down"> 
<img src="bottoml.jpg" border="0" />&nbsp;&nbsp;&nbsp;&nbsp;<img 
src="bottom2.jpg" border="0" /> 


</div> 
</div> 
</body> 
</html> 
在 IE9.0 中 浏览 效果 如 图 13-16 所 示 ， 可 以 看 到 页 面 自 上 向 下 ， 显 示 图 片 、 段 落 信息 和 图 片 。 
| 


Ooms oox]S exam 


于 手 六 风行 众 信 并且 期 站 作 3 册 站 3 这 各 
雪人 国人 业 六 推介 今日 在 这 用 举行! 
ER 局 中 国 区 站 人 下 地 全 主人 月 诡 外 


和 -Ra 十 - 缠 支 皖 T 的 文化 记忆 复 
Ei 


[= 


图 13-15 旅游 宣传 页 图 13-16 构建 HTMIL 文 档 
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添加 CSS 代 码 ， 修 饰 整体 DIV 。 


<style> 
Padding:0PF7 
margin:0px; 
} 
body{ 
font-family:" 宋 体 "; 
font-size:]12px; 
’ 
big 
width:220px; 
border:#0033FF lpx solid; 
margin:1l0px 0 0 20px; 
} 
</style> 


层 的 宽度 、 边 框 样式 和 外 边 距 。 


内 ， 其 边框 颜色 为 蓝 色 ， 大 小 为 1px。 


漳 


CSS 样 式 代码 在 body 标 志 选 择 器 设置 了 字体 和 字体 大 小 ， 并 在 big 类 选择 器 中 ， 设 置 整个 


在 IE9.0 中 浏览 效果 如 图 13-17 所 示 ， 可 以 看 到 页 面 


图 


到 季 芒 正 活 行 次 信 就 关 轩 类 二 请 
温 


添加 CSS 代 码 ， 修 饰 字体 和 图 片 。 


-up pt{ 
margin:5PX7 
让 
.up img{ 
margin:S5px; 
text-align:center;} 
.down{ 
text-align:center; 


上 

.down img{ 
margin-top: 5px; 
上 


border-top:#FF0000 lpx dashed; 


13-17 设置 整体 DIV 样 式 


片 信 息 和 文本 都 在 一 个 矩形 盒子 


Oe amon pcx 
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上 面 代码 定义 了 段落 、 图 片 的 外 边 距 ， 例 如 margin-top:5px 语 句 设 置 了 下 面 图 片 的 外 边 距 
为 5Spx， 两 个 图 片 距离 是 10px。 

在 IE9.0 中 浏览 效果 如 图 13-15 所 示 ， 可 以 看 到 字体 居中 显示 ， 下 面 带 有 一 个 红色 虚线 ， 
宽度 为 ]px。 


13.5 综合 实例 2 一 一 淘宝 导购 菜单 


—s 


网 上 购物 已 经 成 为 了 一 种 时 尚 ， 其 中 淘宝 网 是 网 上 购物 网 站 影响 比较 大 的 网 站 之 一 。 淘 
宝 网 的 宣传 页 面 到 处 都 是 。 本 实例 结合 前 面 学 习 的 知识 ， 创 建 一 个 淘宝 网 宣传 导航 页 面 ， 具 
体 步骤 如 下 所 示 。 

四 分 析 需 求 。 

根据 实际 效果 ， 需 要 创建 一 个 div 层 包含 3 个 部 分 ， 即 左边 导航 栏 、 中 间 图 片 显示 区 域 和 右 
边 导航 栏 ， 然 后 使 用 CSS 颜 色 设置 导航 栏 字体 和 边框 。 实 例 完成 后 ， 具 体 效 果 如 图 13-18 所 示 。 

加 构建 HTML 页面， 使 用 DIV 搭建 框架 。 

<html > 

<head> 

<title> 淘 宝 网 </title> 

</head> 

<body> 

<div class="wrap"> 


<div class="area"> 
<div > 
<div class="tab area"> 
<ul> 
<li class="current"><a href="#"> 男 T 恤 </a></1i> 
<1i ><a href="#"> 男 衬衫 </a></1i> 
<1li><a href="#"> 休 闲 裤 </a></1i> 
<1i><a href="#"> 牛 仔裤 </a></1i> 
<1i><a href="#"> 男 短裤 </a></1i> 
<1i><a href="#"> 西 裤 </a></1i> 
<1i><a href="#"> 皮 鞋 </a></1i> 
<1i><a href="#"> 休 闲 鞋 </a></1i> 
<1i ><a href="#"> 男 凉鞋 </a></1i> 
</ul> 
</div> 
<div class="tab areal™" > 
<ul> 
<1i><a href="#"> 女 T 恤 </a></1i> 
<li><a href="#"> 女 衬衫 </a></1i> 
<1i><a href="#"> 开 衫 </a></1i> 
<1i ><a href="#"> 女 裤 </a></1i> 
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<1i><a href="#"> 女 包 </a></1i> 
<li ><a href="#"> 男 包 </a></1i> 
<1i ><a href="#"> 皮 带 </a></1i> 
<1i><a href="#"> 登 山 鞋 </a></1i> 
<1i ><a href="#"> 户 外 装 </a></1i> 
</ul> 
</div> 
</div> 
<div class="img area"> 
<img src=nantzxu.jpg/> 
</div> 
</div> 
</body> 
</html> 


在 Firefox 5.0 中 浏览 效果 如 图 13-19 所 示 ， 三 部 分 内 容 分 别 自 上 而 下 显示 ， 第 一 部 分 是 导 
航 菜单 栏 ， 第 二 部 分 也 是 一 个 导航 菜单 栏 ， 第 三 部 分 是 一 个 图 片 信息 。 


图 13-18 淘宝 宣传 页 图 13-19 基本 HTML 显 示 


添加 CSS 代 码 ， 修 饰 整体 样式 。 


<style type="text/css"> 
body, p, ul, li{margin:0; padding:0;} 
body{font:12px arial, 宋体 , sans-serif;} 
.wrap{width:318px;height:248px; background-color:#FFFFFF; 
float:left;border: lpx solid #F27B04;} 
.area{width:318px; float:left;} 
.tab area{width:53px; height:248px; border-right:lpx solid 
#F27B04;overflow:hidden; } 
.tab areal{width:53px; height:248px; border-left:lpx solid 
#F27B04;overflow:hidden; position:absolute left:265px; top:lpx; } 
.img areal{ 
width:208px; 
height:248px; 
overflow:hidden; 
position:absolute; 
top:—2pX7 
lefts:SSpxs 
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</style> 


上 面 CSS 样 式 代码 中 ,设置 了 body 页 面 字体 、 段 落 、 列 表 和 列表 选项 的 样式 。 需 
注意 的 是 类 选择 器 tab_area 定 义 了 左边 列表 选项 ， 即 左边 导航 菜单 ， 其 宽度 为 53px， 高 度 
为 248px， 边 框 色 为 黄色 。 类 选择 tab_areal 定 义 右边 列表 选项 ， 即 右边 导航 菜单 ， 其 宽度 
和 高 度 同 左 侧 菜单 相同 ， 但 此 次 使 用 position 定 义 了 这 个 div 层 显示 的 绝对 位 置 ， 语 名 为 
“position:absolute; left:265px: top:1]px:”。 类 选择 器 img_area 定 义 中 间 图 片 显示 样式 ， 也 是 使 
用 position 绝 对 定位 。 

在 Firefox 5.0 中 浏览 效果 如 图 13-20 所 示 ， 可 以 看 到 网 页 中 显示 了 3 个 部 分 ， 左 右 两 侧 为 导 
航 菜单 栏 ， 中 间 是 图 片 。 


淘宝 网 - Wozilla Firefox 
文件 EE) 编辑 EE) 查看 WD 历史 G) 书签 @) 工具 CD) 大助 0 
人 se/ /iri/ cht3/13.15. htnl ES 


图 13-20 设置 整体 布局 样式 


添加 CSS 代 码 ， 修 饰 列表 选项 。 


img{border:0;} 

li{list-style:none;} 

a{font-size:12px; text-decoration:none} 

a:link,a:visited {color:#999;} 

.tab area ul li,.tab areal ul 1i 

{width:53px;height:27px;text-align:center;line-height:26px; 
float:left;border-bottom:lpx solid #F27B04;} 

.tab area ul li a,.tab areal ul li a{color:#3d3d3d;} 


-tab area ul li.current,.tab areal ul li.current{ height:27px; background- 
color:#F27B04;} 


.tab area ul li.current a,.tab areal ul li.current a{color:#fff; font-— 
size:12px; font-weight:400; line-height:27px} 
上 面 CSS 样 式 代码 完成 了 对 字体 大 小 、 颜 色 、 是 否 带 有 下 划 线 等 属性 定义 。 
在 Firefox 5.0 中 浏览 效果 如 图 13-18 所 示 ， 可 以 看 到 网 页 中 左右 两 个 导航 菜单 ， 相 对 于 上 
图 形 ， 字 体 颜 色 和 大 小 发 生变 化 。 


车 
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人 .6 专家 解 惑 


1， 如 何 理解 margin 的 加 倍 问题 ? 

当 div 层 被 设置 为 hoat 时 ， 在 IE 下 设置 的 margin 会 加 倍 。 其 解决 办 法 是 ， 在 这 个 div 里 面 加 
上 “display:inline:”。 

例如 : 

<#div id="imfloat"></#div> 

相应 的 css 为 : 


#imfloat { 
float:left; 
margin:S5px; 
display:inline; 


} 

2. margin:0 auto 表 示 什 么 含义 ? 

margin:0 auto 定 义 元 素 向 上 补 白 0 像素 ， 左 右 为 自动 使 用 。 这 样 按照 浏览 器 解析 习惯 是 可 
以 让 页 面 居 中 显示 的 ， 一 般 这 个 语句 会 在 body 标 记 中 。 在 使 用 margin:0 auto 语 句 使 页 面 居 中 
的 时 候 ， 一 定 要 给 元 素 一 个 高 度 并 且 不 要 让 元 素 浮动 ， 即 不 要 加 float， 否 则 效果 失效 。 
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DIV+CSS3 
页 面 基 本 排版 


本 章 引言 


使 用 DIV+CSS3 页 面 排版 ， 已 经 逐步 蔡 代 了 使 用 Table 表 格 
排版 ， 相 比较 Table 表 格 ，DIV+CSS3 页 面 排版 是 一 种 更 好 的 、 
更 有 亲和力 的 、 更 灵活 的 而 且 功能 更 强大 的 网 站 设计 方法 。 


TT, Nn, RE A, gs. kt 
ma” 


Ma A et 
ee i 
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市 场 价 .390 元 
购买 分 ，13o 元 


@、 wma DIV+CSS3 网 布局 与 样式 


俐 1 CSS3 排 版 观念 


DIV 在 CSS3+DIV 页 面 排 版 中 是 一 个 块 的 概念 ， 其 起 始 标记 和 结束 标记 之 间 的 所 有 内 容 都 
是 用 来 构成 这 个 块 的 ， 其 中 所 包含 元 素 特性 由 DIV 标记 属性 来 控制 ， 或 者 通过 使 用 样式 表格 
式 化 这 个 块 来 进行 控制 。CSS3+DIV 页 面 排版 思想 是 ， 首 先 在 整体 上 进行 <div> 标 记 的 分 块 ， 
然后 对 各 个 块 进行 CSS 定 位 ， 最 后 再 在 各 个 块 中 添加 相应 的 内 容 。 


ESEN 将 页 面 用 DIV 分 块 


使 用 DIV+CSS3 页 面 排版 布局 ， 需 要 对 网 页 有 一 个 整体 构思 ， 即 网 页 可 以 划分 几 个 部 
分 ， 例 如 上 中 下 结构 、 左 右 两 列 结构 、 三 列 结构 。 这 时 就 可 以 根据 网 页 构思 ， 将 页 面 划分 
为 几 个 DIV 块 ， 用 来 存放 不 同 的 内 容 。 当 然 了 ， 大 块 中 还 可 以 存放 不 同 的 小 块 。 最 后 ， 通 过 
CSS 属 性 ， 对 这 些 DIV 进行 定位 。 

在 现在 的 网 页 设计 中 ， 一 般 情 况 下 的 网 站 都 是 上 中 下 结构 ， 即 上 面 是 页 面 头 部 ， 中 间 是 
页 面 内 容 ， 最 下 面 是 页 脚 ， 整 个 上 中 下 结构 最 后 放 到 一 个 DIV 容 器 中 ， 方 便 控制 。 页 面 头 部 
一 般 用 来 存放 Logo 和 导航 菜单 ， 页 面 内 容 包 含 页 面 要 展示 的 信息 、 链 接 和 广告 等 ， 页 脚 存放 
的 是 版 权 信 息 和 联系 方式 等 。 

将 上 中 下 结构 放置 到 一 个 DIV 容 器 中 ， 方 便 后 面 排版 并 且 方 便 对 页 面 进行 整体 调整 。 如 
图 14-1 所 示 。 


页 脚 


图 14-1 上 中 下 页 面 结构 


人 到， 设置 各 块 位 置 


复杂 的 网 页 布局 ， 不 是 单纯 的 一 种 结构 ， 而 是 包含 多 种 网 页 结构 。 例 如 ， 总 体 上 是 上 中 
下 ， 中 间 部 分 为 两 列 布局 等 ， 如 图 14-2 所 示 。 
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整体 页 面容 器 


页 头 


页 面 主体 左 侧 页 面 主体 右 侧 


页 脚 


图 14-2 复杂 页 面 布 局 


页 面 总 体 结构 确认 后 ， 一 般 情况 下 ， 页 头 和 页 脚 变 化 就 不 大 了 。 会 发 生变 化 的 就 是 页 面 


主体 ， 此 时 需要 根据 页 面 展示 的 内 容 决 定 中 间 布 局 采用 什么 样式 ， 三 列 水 平分 布 还 是 两 列 分 


布 等 。 


CR 用 CSS 定 位 


页 在 


页 面 版 式 确定 后 ， 就 可 以 利用 CSS 对 DIV 进 行 定 位 ， 使 其 在 指定 位 置 出 现 ， 从 而 实现 对 
的 整体 规划 ， 然 后 再 向 各 个 页 面 添 加 内 容 。 


本 节 将 以 图 14-2 为 实现 蓝图 ， 创 建 一 个 总 体 为 上 中 下 布局 、 页 面 主体 布局 为 左右 布局 的 


CSS 定 位 实例 。 


【 例 14.1】 实 例文 件 ，ch14\14.1.html 
四 首先 构建 HTML 页 面 ， 使 用 DIV 划分 最 基本 的 布局 块 ， 其 代码 如 下 : 


<html> 
<head> 
<title>css 排 版 </title><body> 
<div id="container"> 
<div id="banner"> 页 面 头 部 </div> 
<div id=content > 
<div id="right"> 
页 面 主体 右 侧 
</div> 
<div id="left"> 
页 面 主体 左 侧 
</div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
</body> 
</html> 


上 面 代码 中 ， 创 建 了 5 个 层 ， 其 中 也 名 称 为 container 的 DIV 层 ， 是 一 个 布局 容器 ， 即 所 


有 的 页 面 结构 和 内 容 都 是 在 这 个 容器 内 实现 ， 名 称 为 banner 的 DIV 层 ， 是 页 头 部 分 ， 名 称 为 
footer 的 DIV 层 ， 是 页 脚 部 分 。 名 称 为 content 的 DIV 层 ， 是 中 间 主 体 ， 该 层 包 含 了 两 个 层 ， 一 


[=] 
个 是 


Tight 层 ， 一 个 是 left 层 ， 分 别 放置 不 同 的 内 容 。 
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在 下 9.0 中 浏览 效果 如 图 14-3 所 示 ， 可 以 看 到 图 中 显示 的 这 几 层 ， 从 上 到 下 依次 排列 。 
对 body 标 记 和 container 层 (布局 容器 ) 进行 CSS 修 饰 ， 从 而 对 整体 样式 进行 定义 ， 代 
码 如 下 ; 


<style type="text/css"> 

C3 

body { 
margin:0px; 
font-size:16px; 
font-family:" 幼 圆 "; 

} 

#container{ 
position:relative; 
width:100%; 

} 

--> 

</style> 


上 面 代码 只 是 设置 了 文字 大 小 、 字 体 、 布 局 容器 container 的 宽度 、 层 定位 方式 ， 布 局 容 
器 撑 满 整个 浏览 器 。 

在 IE9.0 中 浏览 效果 如 图 14-4 所 示 ， 可 以 看 到 此 时 相 比 较 上 一 个 显示 页 面 ， 发 生 的 变化 不 
大 ， 只 不 过 字体 和 字体 大 小 发 生变 化 ， 因 container 没 有 边框 和 背景 色 而 无 法 显示 。 


< ECE pex|scsws “le 


Cmmom Pp-cxlecus ED 
机 可 。 
页 面 头 页 
| 8 主人 


页 面 主体 左 便 
训 


图 14-3 创建 DIV 层 图 14-4 设置 全 局 CSS 样 式 


使 用 CSS 对 页 头 进 行 定位 ， 即 banner 层 ， 使 其 在 网 页 上 显示 ， 代 码 如 下 : 
#banner{ 
height:80px; 
border:lpx solid #000000; 
text-align:center; 
background-color:#a2d9ff; 
padding:10px; 
margin-bottom: 2px; 
} 
上 面 代 码 首 先 设置 了 banner 
层 的 高 度 为 80px， 宽 度 充满 整个 
container 布 局 容器 ， 接 着 分 别 设置 
了 边框 样式 、 字 体 对 齐 方式 、 背 景 
色 、 内 边 距 和 外 边 距 的 底部 等 。 
在 IE9.0 中 浏览 效果 如 图 14-5 所 
示 ， 可 以 看 到 在 页 面 顶部 显示 了 一 


图 14-5 CSS 设 置 页 头 
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个 浅 绿色 的 边框 ， 边 框 充满 整个 浏览 器 ， 边 框 中 间 显 示 了 一 个 “页 面 头 部 ”的 文本 信息 。 
在 页 面 主体 如 果 两 个 层 并 列 显示 ， 需 要 使 用 float 属 性 ， 将 一 个 层 设置 到 左边 ， 一 个 


层 设置 到 右边 。 其 代码 如 下 : 


#right{ 
float:right; 
text-align:center; 
width:80%; 
border:lpx solid #ddeecc; 
margin-left:1px; 
height:200px; 
} 
#1left{ 
float:left; 
width:19%; 
border:lpx solid #000000; 
text-align:center; 
height:200px; 
background-color:#bcbcbc; 


} 

上 面 代码 设置 了 这 两 个 层 的 
宽带 ，right 层 占有 空间 的 80%， 
left 层 占有 空间 的 19%， 并 分 别 设 
置 了 两 个 层 的 边框 样式 、 对 齐 方 
式 、 背 景色 等 。 

在 IE9.0 中 浏览 效果 如 图 14-6 
所 示 ， 可 以 看 到 页 面 主体 部 分 ， 
分 为 两 个 层 并 列 显 示 ， 左 边 背景 
色 为 灰色 ,占有 空间 较 小 ， 右 侧 图 14-6 CSS 定 位 中 间 主 体 
背景 色 为 白色 ， 占 有 空间 较 大 。 


最 后 需要 设置 页 脚 部 分 ， 页 脚 通常 在 主体 下 面 。 因 为 页 面 主体 中 使 用 了 foat 属 性 设 


置 层 浮动 ， 所 以 需要 在 页 脚 层 设置 clear 属 性 ， 使 其 不 受 浮动 的 影响 。 其 代码 如 下 : 


#footer{ 
clear:both; /* 不 受 float 影 响 */ 
text-align:center; 
height:30px; 
border:lpx solid #000000; 
background-color:#ddeecc; 
} 


上 面 代码 设置 页 脚 对 齐 方式 、 高 度 、 边 框 和 背景 色 等 。 在 IE9.0 中 浏览 效果 如 


图 14-7 所 


可 以 看 到 页 面 底部 显示 了 一 个 边框 ， 背 景色 为 浅 绿色 ， 边 框 充满 整个 DIV 布 局 容器 。 
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Ree Pre*xlJscws | 


| 


页 面 主体 石 铀 


图 14-7 CSS 定 义 页 脚 


14.2 固定 宽度 布局 


在 进行 网 页 设计 时 ， 必 须 考虑 网 页 布局 宽度 ， 因 为 浏览 者 会 使 用 大 小 不 同 的 浏览 器 查看 
页 面 ， 设 计 宽度 过 大 ， 有 的 浏览 器 就 不 能 完全 显示 出 来 ， 设 计 宽度 过 小 ， 显 示 内 容 就 不 能 完 
成 显示 并 容易 出 现 滚动 条 。 


《ES 上 中 下 版 式 


网 页 开发 过 程 中 ， 有 几 种 比较 经 典 的 网 页 排版 方式 ， 包 括 宽度 固定 的 上 中 下 版 式 、 宽 度 
固定 的 左右 版 式 、 自 适应 宽度 布局 和 浮动 布局 等 。 这 些 版 式 会 经 常 网 页 设计 时 出 现 ， 并 且 经 
常用 在 各 种 类 型 的 网 站 开发 中 。 

宽度 固定 的 上 中 下 版 
式 布局 ， 应 用 得 非常 广泛 。 
但 其 一 般 用 在 简单 信息 介绍 
上 ， 而 不 用 在 网 站 首页 上 。 
这 种 版 式 布局 简单 ， 包 含 信 | 8 光 吕 和 计 
息 较 少 。 本 节 将 介绍 一 个 上 Pee: i 
中 下 版 式 布局 ， 其 效果 如 图 a 的 该 费 ， 全 天 好 a 
14-8 所 示 。 

从 上 面 的 效果 可 以 看 
到 ， 这 个 页 面 一 共 分 为 三 个 
部 分 ， 第 一 部 分 包含 图 片 和 国 149 寺中 下 布局 
菜单 栏 ， 这 一 部 分 放 到 页 头 ， 是 上 中 下 版 式 的 “上 ”; 第 二 个 部 分 是 中 间 的 内 容 部 分 ， 即 页 
面 主体 ， 用 于 存放 要 显示 的 文本 信息 ， 是 上 中 下 版 式 的 “中 ”; 第 三 个 部 分 是 页 面 底部 ， 包 
含 地 址 和 版 权 信息 的 页 脚 ， 是 上 中 下 版 式 的 “下 ”。 


mm xem | 
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需要 说 明 的 是 ， 本 节 主 要 介绍 网 页 布局 ， 所 以 对 其 他 样式 修饰 的 CSS 代 码 ， 这 里 就 不 再 
介绍 了 ， 读 者 可 以 查看 光盘 中 提供 的 相关 代码 。 


【 例 14.2】 实 例文 件 : ch14\14.2.html 
使 用 DIV 块 对 页 面 区 域 进行 划分 ， 使 其 符合 如 图 14-8 所 示 的 页 面 布局 ， 基 本 代码 如 下 : 


<html> 
<head> 
<title> 上 中 下 排版 </title> 
</head> 
<body> 

<div class="big"> 


<div class="up"> 
<p><a href="#"> 首 页 </a><a href="#"> 环 保 扫描 </a><a href="#"> 环 保 
科技 </a><a href="#"> 低 碳 经 济 </a><a href="#"> 土 壤 绿化 </a></p></div> <div class="middle"> 
<br /> 
<h1> 拒 绝 使 用 一 次 性 用 品 </h1> 
<p> ”在 现代 社会 生活 中 ， 商 品 的 废弃 和 任意 处 理 是 普遍 的 ， 特 别 是 一 次 性 物品 使 用 
激增 。 据 统计 ， 英 国人 每 年 抛弃 25 亿 块 尿布 …*… 
</p> 
</div> 
<div class="down"> 
<br /> 
<p><a href="#"> 关 于 我 们 </a> | <a href="#"> 免 责 声明 </a> | <a 
href="#"> 联 系 我 们 </a> | <a href="#"> 生 态 中 国 </a> | <a href="#"> 联 系 我 们 </a></p> 
<p>2011 &copy; 世界 环保 联合 会 郑州 办 事 处 技术 支持 </p> 
</div> 
</div> 
</body> 
</html> 


上 面 代 码 创 建 了 4 个 层 ，big 层 是 DIV 布 局 容器 ， 用 来 存放 其 他 DIV 抉 ，up 层 表示 页 头 部 
分 ; middle 层 表示 页 面 主体 ;down 层 表示 页 脚 部 分 。 

在 IE9.0 中 浏览 效果 如 图 14-9 所 示 ， 可 以 看 到 页 面 显示 了 3 个 区 域 信息 ， 顶 部 显示 的 是 超 
级 链接 部 分 ， 中 间 显示 的 是 段落 信息 ， 底 部 显示 的 是 地 址 和 版 权 信息 。 其 布局 从 上 到 下 自动 
排列 ， 不 是 期 望 的 布局 方式 。 


| Bier ets 此 


拒绝 使 用 一 次 性 用 品 


有 人 
ti et > 人 
E tat i 


次 性 
A 
Ee 
Fink 人 联系 我 们 | 生 志 中 国 | 联系 我 们 
na 二 和 


六 于 直人 | 名 声明 | 联系 热 们 | 生 过 中 国 | 台所 把 们 
ol 9 世界 要 联合 全 郑州 加 外 技术 支持 


图 14-9 实现 DIV 块 图 14-10 定义 整体 样式 


加 上 面 页 面 显示 时 ， 字 体 样式 非常 丑陋 ， 布 局 不 合理 。 此 时 需要 使 用 CSS 代 码 ， 对 页 
面 整体 样式 ， 进 行 修饰 。 其 代码 如 下 : 
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<style> 

Bd 
padding:0px; 
margin:0px; 

body{ 
font-family:" 幼 圆 "; 
font-size:12px; 

color:green; 

} 

-Digf 
width:900px; 
margin:0 auto 0 auto; 


pr 

上 面 代码 定义 了 页 面 整体 样式 ， 字 体 为 “ 幼 圆 ”， 字 体 大 小 为 12px， 字 体 颜 色 为 绿色 ， 
布局 容器 big 的 宽度 为 900px。“margin:0 auto 0 auto” 语 句 表示 该 块 与 页 面 的 上 下 边界 之 间 的 
距离 为 0， 左 右 自动 调整 。 

在 IE9.0 中 浏览 效果 如 图 14-10 所 示 ， 可 以 看 到 页 面 字 体 变 小 ， 字 体 颜 色 为 绿色 ， 并 充满 
整个 页 面 ， 页 面 宽度 为 900px。 

使 用 CSS 定 义 页 头 部 分 ， 即 导航 菜单 ， 其 代码 如 下 : 


-up{ 
width:900px; 
height:100px; 
background-image:url (17.jpg); 
background-repeat:no-repeat; 


) 
在 类 选择 器 up 中 ，CSS 定 义 层 的 宽度 和 高 度 ， 其 宽度 为 900px， 并 定义 了 背景 图 片 。 
在 IE9.0 中 浏览 效果 如 图 14-11 所 示 ， 可 以 看 到 页 面 项 部 显示 了 一 个 背景 图 ， 并 且 超 级 链 
接 以 一 定 距离 显示 ， 以 绝对 定位 方式 在 页 头 显示 。 


et 


、 
大 国 ， 间 
箱 也 全 天 来 元 法 预料 的 灾 


而 县 产 生 的 竣 茎 物 也 会 项 来 天 法 预科 的 灾 奸 - 
生态 中 国 | 长 系 我 们 


生 章 产 呈 | 张 我 们 
条 玫 记 大 | 了 和 我们 | 生 让 中 国 DD ;3 
1 也 四 生生 报 林 和 i 让 


图 14-11 CSS 修 饰 页 头 图 14-12 CSS 定 义 中 间 部 分 


使 用 CSS 定 义 页 面 主 休 ， 即 定义 层 和 段落 信息 ， 代 码 如 下 : 


-middlef{ 
border:1lpx #ddeecc solid; 
margin-top:10px; 
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} 


在 类 选择 器 middle 中 ， 定 义 了 边框 样式 和 内 边 距 ， 此 处 层 的 宽度 和 big 层 宽度 一 致 。 
在 IE9.0 中 浏览 效果 如 图 14-12 所 示 ， 可 以 看 到 中 间 部 分 以 边框 形式 显示 ， 标 题 居 中 显 


示 ， 段 落 缩 进 两 个 字符 显示 。 
加 定义 页 脚 部 分 代码 如 下 所 示 : 


-down{ 
background-color:#CCCCCC; 
height:80px; 
text-align:center; 


} 


上 面 代 码 中 ， 类 选择 器 down 定 义 了 背景 颜色 、 高 度 和 对 齐 方式 。 其 他 选择 器 定义 超级 链 


接 的 样式 。 


在 IE9.0 中 浏览 效果 如 图 14-8 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 灰色 矩形 框 ， 其 版 权 信 


息 和 地 址 信息 居中 显示 。 


全 左右 版 式 


页 面 排版 中 ， 有 时 根据 
内 容 需 要 页 面 主 体会 分 为 左右 
两 个 部 分 显示 ， 用 来 存放 不 同 
的 信息 内 容 。 实 际 上 这 也 是 一 


种 宽度 固定 的 版 式 。 疆 " 噶 茶 当 于 页 逝 窗 下 ， 清 泉 绿茶 ,， 用 素 雅 的 出 先 荣 
需要 说 明 的 是 ， 本 节 主 要 具 ， 同 二 三 人 共 饮 ,得 半日 之 闲 ， 可 抵 十 年 的 生 执 ” 
介绍 网 页 布局 ， 所 以 对 其 他 修 = pu 
plete > 站 和 

关内 容 。 
本 节 实 例 完 成 后 的 效果 如 
图 14-13 所 示 。 此 框架 大 体 上 也 图 14-13 左右 版 式 效果 
是 上 中 下 结构 ， 只 不 过 页 面 主 
体 部 分 又 分 了 左右 版 式 。 


【 例 14.3】 实 例文 件 : ch14\14.3.html 


在 HTML 页 面 ， 将 DIV 框 架 和 所 要 显示 的 内 容 显示 
好 ， 代 码 如 下 ; 


<html> 

<head> 

<title> 茶 网 </title> 
</head> 


来 ， 并 将 要 引用 的 样式 名 称 定义 
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<body> 
<div id="container"> 
<div id="banner"> 
<img src="b.jpg" border="0"> 
</div> 
<div id="links"> 
<ul> 
<1i> 首 页 </1i> 
<1i> 茶 业 动 态 </1i> 
<1i> 名 蔡 荟 菜 </1i> 
<1i> 茶 与 文化 </1i> 
<1i> 茶 艺 茶道 </1i> 
<1i> 鉴 茶 品 茶 </1i> 
<1i> 茶 与 健康 </1i> 
<1i> 茶 语 清心 </1i> 
</ul> 
<br> 
</div> 
<div id="leftbar"> 
<p class="lefttitle"> 名 人 与 茶 </p> 
<p> .三 文 鱼 茶 泡饭 </p> 
<p>. 董 小 宛 的 茶 泡 饭 </p> 
<p>. 人 生 百 味 一 功 茶 </p> 
<p> .我 家 的 茶 事 </p> 
<p class="lefttitle"> 茶 事 掌故 </p> 
<p>.“ 峨 眉 雪 芽 ”的 由 来 </p> 
<p>. 茶 文化 的 养生 术 </p> 
<p>. 老 北京 的 花茶 </p> 
<p> .古代 洗 茶 的 原因 和 来 历 </p> 
</div> 
<div id="content"> 
<h4> 人 生 茶 境 </h4> 


<p> 


“ 喝 茶 当 于 瓦 纸 窗 下 ， 清 泉 绿茶 ， 用 素雅 的 陶瓷 茶具 ， 同 二 三 人 共 饮 ， 得 半日 之 闲 ， 可 抵 十 年 的 和 尘 梦 。” 


</p> 
<p> 
对 中 国人 来 说 ，“ 茶 ”是 一 个 温暖 的 字 …… 
</p> 
</div> 
<div id="footer"> 版 权 所 有 2011.08.12</div> 
</div> 
</body> 
</html> 


上 面 代码 定义 了 几 个 层 用 来 构建 页 面 布 局 。 其 中 层 container 作 为 布局 容器 ，banner 作 为 页 


分 ，footer 层 作为 页 脚 部 分 。 
在 IE9.0 中 浏览 效果 如 图 14-14 所 示 ， 可 以 看 到 页 面 上 部 显示 了 一 张 
段落 信息 ， 最 后 是 地 址 信息 等 。 


Xk 
Hh 


面 图 形 Logo，links 层 作为 页 面 导 航 ，leftbar 层 作为 左 侧 内 容 部 分 ，content 层 作为 右 侧 内 容 部 


图 片 ， 下 面 是 超级 链 
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加 定义 整体 样式 ， 例 如 网 页 中 字形 或 对 齐 方式 等 ， 代 码 如 下 : 


<style> 

二 

body, html{ 
margin:0px; padding:0px; 
text-align:center; 

} 

#container{ 
position: relative; 
margin: 0 auto; 
padding:0px; 
width:700px; 
text-align: left; 

下 

> 

</style> 


上 面 代 码 中 ， 类 选择 器 container 定 义 了 布局 容器 的 定位 方式 为 相对 定位 ， 宽 度 为 700px， 


文本 左 对 齐 ， 内 外 边 距 都 为 0px。 


在 IE9.0 中 浏览 效果 如 图 14-15 所 示 ， 可 以 看 到 与 上 一 个 页 面 比较 ， 发 生变 化 不 大 。 


Ce 
#5 
的 由 
条 
SR 
tee 
A 


图 14-14 DIV 层 构建 布局 样式 


国 此 网 页 的 页 头 部 分 ， 包 含 两 个 部 分 ， 


#banner{ 
margin:0px; padding:0px; 
} 
#1links{ 
font-size:12px; 
margin:-18px 0px 0px Opx; 
padding:0px; 
position:relative; 


} 


下 小 光 共和 
,人生 百 中- 坦 基 
By 
he 
“二 全 对 "的 由 来 
六 lm 水 
EN 

二 作坊 友和 认 历 
A 


图 14-15 整体 样式 定义 


即 Logo 和 导航 菜单 。 这 两 个 层 的 CSS 代 码 如 下 : 


309 
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上 面 代码 中 ， 了 D 选 择 器 banner 定 义 了 内 外 边 距 都 是 0px，ID 选 择 器 links 定 义 了 导航 菜单 的 
样式 ， 例 如 字体 大 小 为 12?px， 定 位 方式 为 相对 定位 等 。 
在 IE9.0 中 浏览 效果 如 图 14-16 所 示 ， 可 以 看 到 页 面 导航 部 分 在 图 像 上 显示 ， 并 且 每 个 菜 
单 相隔 一 定 距 离 。 
加 使 用 CSS 代 码 定义 页 面 主体 左 侧 部 分 ， 代 码 如 下 : 
#1leftbar{ 
background-color:#d2e7ff; 
text-align:center; 
font-size:12px; 
width:150px; 
float:left; 
padding-top:0px; 
padding-bottom: 30px; 
margin:0px; 
F 
上 面 选 择 器 leftbar 中 定义 了 层 背景 色 、 对 齐 方式 、 文 字 大 小 和 左 侧 DIV 层 的 宽度 ， 这 里 使 
用 float 定 义 层 在 水 平方 向 上 浮动 定位 。 
在 IE9.0 中 浏览 效果 如 图 14-17 所 示 ， 可 以 看 到 页 面 左 侧 部 分 以 矩形 框 显示 ， 包 含 了 一 些 
简单 的 页 面 导航 。 


CC 
人 
2 Ht 


pe 
er A ee 和 
和 


te 


图 14-16 定义 页 头 部 分 图 14-17 CSS 定 义 页 面 左 侧 


辆 使 用 CSS 代 码 定义 页 面 主体 右 侧 部 分 ， 代 码 如 下 : 


#content{ 
font-size:12px; 
float:left; 

width:550px; 
padding:5px Opx 30px Opx; 
margin:0px; 


} 

代码 中 ID 选择 器 content 用 来 定义 字体 大 小 、 右 侧 div 层 宽度 ， 内 外 边 距 等 。 在 正 9.0 中 浏览 
效果 如 图 14-18 所 示 ， 可 以 看 到 右 侧 部 分 的 段落 字体 变 小 ， 段 落 缩 进 了 两 个 单元 格 。 

四 如 果 上 面 的 层 使 用 了 浮动 定位 ， 页 脚 一 般 需 要 使 用 clear 去 掉 浮 动 所 带 来 的 影响 ， 其 
代码 如 下 所 示 : 
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#footer{ 
clear:both; 
font-size:12px; 
width:100%; 
padding:3px Opx 3px Opx; 
text-align:center; 
margin:0px; 
background-color:#b0cfff; 
} 


footer 选 择 器 中 定义 了 层 的 宽度 、 字 体 、 对 齐 方式 和 背景 色 。 在 IE9.0 中 浏览 效果 如 
14-13 所 示 ， 可 以 看 到 页 脚 显示 了 一 个 矩形 框 ， 背 景色 为 浅 蓝 色 ， 和 珑 形 框 内 显示 了 版 权 信息 。 


史 


[* BD 


人 生 革 六 


了 于 下 下 二 用 下 朋 ， 同 二 人 并 这 后首， 本 拓 十 
0 


aa 
a 
2 人 

币 


J Ra 
a 
厂 权 所 有 2011. 08.12 


图 14-18 定义 右 侧 内 容 


14.3” 自 适应 宽度 布局 


一 般 的 门户 网 站 都 采用 了 一 种 典型 的 960px 的 固定 宽度 布局 ， 但 现在 的 浏览 器 分 辩 率 越 
来 越 大 ， 有 时 候 需要 尽量 利用 屏幕 的 空间 ， 可 以 采用 自 适应 布局 模式 。 
本 节 创建 了 一 个 中 间 宽 度 自 适 应 ， 左 右 两 侧 宽度 固定 的 页 面 ， 如 图 14-19 所 示 。 


已 广博 信行 站 证 你 六 受 请 


2 的， 和 人 。 全 和 在 的 风 上 重生 和 的 插 央 。 生 下 一 天 和 全。 
2 村 和。 生生 全 。 人 避让 丰 上， 过 了 -下 区 有 于 届 。 “年 了 1 二 二 ， 间 站 了 1 ~ 


了 


从， sa 元 
罗 严 价 ,159 元 


图 14-19 自 适 应 宽度 布局 
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上 面 页 面 可 以 划分 为 3 个 部 分 ， 分 别 是 左 、 中 、 右 布局 。 左 侧 存放 列表 ， 中 间 存 放 段 
落 ， 右 侧 存放 图 片 信息 等 。 


【 例 14.4】 实 例文 件 : ch14\14.4.html 


构建 HTML， 使 用 DIV 层 布局 。 
在 HTML 页 面 中 使 用 DIV 层 ， 将 页 面 划 分 为 不 同 的 区 域 ， 即 划分 左 侧 
层 ， 其 代码 如 下 : 


<html> 

<head> 
<title> 自 适应 宽度 布局 </title> 
</head> 

<body> 

<div id="wrap"> 


右 侧 层 和 中 间 


| 


<div class="wrap_1"> 
<p> 鲜 花 类 型 </p> 

<p> .玫瑰 花 </p> 

<p> .百合 花 </p> 

<p>. 康 乃 世 </p> 

<p> .郁金香 </p> 

<p> .马蹄 莲 </p> 

<p>. 扶 郎 </p> 

<p> . 瓶 插花 </p> 

<p>.99 朵 玫瑰 </p> 
</div> 

<div class="Wwrap_r"> 
<img src="41.jpg"/> 
<p> 市 场 价 ，390 元 </p> 
<p> 购 买 价 ，159 元 </p> 
</div> 

<div class="wrap _m"> 
<hl> 七 夕 情人 节 , 见证 你 的 爱情 </h1><p> 
20 岁 的 时 候 ， 我 说 我 爱 你 ， 你 把 头 靠 在 我 的 肩 上 ， 紧 紧 地 挽 住 我 的 手臂 ， 像 是 下 一 秒 我 就 要 消失 一 样 。 
</p></div></div> 
</body> 

</html> 


上 面 代码 定义 了 4 个 层 ， 层 wrap 是 个 布局 容器 ， 用 来 存放 页 面 内 所 有 的 文本 和 图 片 信 
息 。wrap_l 层 定义 页 面 左 侧 部 分 ，wrap_r 定 义 页 面 右 侧 部 分 ，wrap_m 定 义 页 面 中 间 部 分 。 
在 IE9.0 中 浏览 效果 如 图 14-20 所 示 ， 可 以 看 到 页 面 自 上 而 下 显示 列表 、 图 片 和 文本 信息 等 。 


图 14-20 div 层 构建 布局 
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园 Css 设置 页 面 整体 样式 。 
首先 设置 页 面 整体 样式 ， 如 字体 、 背 景色 等 。 其 代码 如 下 ; 


<style type="text/css"> 
ee 


body{margin:0;padding:0px;text-align:center;} 
#wrap{margin:0 auto;text-align:left;} 
</style> 


上 面 代码 定义 了 body 页 面 和 层 wrap 的 内 外 边 距 和 对 齐 方式 。 页 面 没有 发 生 较 大 的 变化 ， 
这 里 就 不 再 显示 了 。 
辆 CSS 定 义 左 侧 内 容 。 


/* 左 边栏 ， 固 定 宽度 */ 
-wrap_l{float:left;margin-right:-150px;width:150px; 
border:lpx solid #333;background-color:#ddeecc;margin-— 
right:2px;height:220px;} 
:wrap_ 1 pi 
text-align:center; 

font-family:" 幼 圆 "; 

font-size:13px; 

line-height:8px; 


} 


上 面 代码 类 选择 器 wrap_l 定 义 了 页 面 左 侧 部 分 的 宽度 为 150px， 高 度 为 220px， 右 侧 内 边 
距 为 -150px， 页 面 浮动 在 左 侧 显示 以 及 边框 样式 、 背 景色 等 。 下 面 的 选择 器 定义 段落 的 显示 
样式 ， 例 如 字体 大 小 、 字 体 、 对 齐 方式 和 行 高 等 。 

在 IE9.0 中 浏览 效果 如 图 14-21 所 示 ， 可 以 看 到 页 面 左 侧 显 示 了 一 个 矩形 框 ， 其 背景 色 为 
浅 蓝 色 并 居中 对 齐 。 

CSS 定 义 中 间 内 容 。 

刚才 左 侧 部 分 定义 了 固定 的 宽度 ， 而 中 间 部 分 就 不 需要 定义 宽度 了 ， 其 CSS 代 码 如 下 : 

/* 中 间 栏 ， 自 适应 宽度 */ 

-wrap mf{width:auto;margin:0 140px 0 150px;border-top:lpx solid #000; 

border-bottom:lpx solid #000;height:220px;} 

-wrap m hli{ 

text-align:center; 


上 

.wrap m Pi 
font-size:13px; 
font-weight:bolder; 
text-indent:2em; 
font-family:" 幼 圆 "; 


上 面 代码 中 ，wrap_m 类 选择 器 定义 中 间 部 分 显示 样式 ， 例 如 宽度 自 适应 、 外 边 距 大 小 、 
层 的 上 边框 样式 等 。 下 面 的 选择 器 定义 了 字体 样式 。 
在 IE9.0 中 浏览 效果 如 图 14-22 所 示 ， 可 以 看 到 页 面 中 间 部 分 还 是 在 页 面 底部 显示 ， 其 字 
体 加 黑 变 粗 显 示 ， 段 落 缩 进 两 个 字符 显示 ， 标 题 居中 显示 。 
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图 14-21 定义 页 面 左 侧 部 分 14-22 定义 中 间 部 分 


CSS 定 义 右 侧 内 容 。 
右 侧 部 分 需要 固定 页 面 宽度 ， 其 CSS 代 码 如 下 ; 


/* 右 边栏 ， 固 定 宽度 */ 
"wrap _r{float:right;margin-left:-140px;width:140px;border:1lpx solid 
#999;margin-left:2px;height:220px;} 
img{width:140px;} 
-wrap Fr p{ 
line-height:12px; 
font-family:" 幼 圆 "; 
下 
在 wrap_r 类 选择 器 中 ，float 属 性 定义 了 层 浮 动 在 右边 显示 ， 宽 度 为 140px， 高 度 为 220px 
等 。img 选 择 器 中 定义 了 图 片 宽度 ， 最 后 一 个 选择 器 定义 了 行 高 和 字形 。 
在 IE9.0 中 浏览 效果 如 图 14-19 所 示 ， 可 以 看 到 页 面 3 个 层 在 页 面 并 列 显示 ， 其 中 右 侧 部 分 显 
示 了 一 个 图 片 。 读 者 可 以 自由 调整 页 面 宽 度 ， 中 间 宽 度 会 随 着 浏览 器 的 大 小 自动 发 生变 化 。 


人 4 其 他 页 面 排版 


除了 上 面 固定 宽度 布局 和 自 适 应 布局 外 ， 还 可 以 利用 前 面 介绍 的 float 和 display 属 性 ， 分 
别 实现 常见 的 浮动 布局 和 隐藏 布局 。 


和 浮动 布局 


DIV+CSS 网 页 布局 常用 到 浮动 布局 ， 但 浮动 并 不 像 表格 那样 好 用 ， 很 多 时 候 会 出 问题 。 
同时 设计 不 够 良好 的 浮动 布局 ， 在 不 同 的 浏览 器 下 会 有 不 同 的 表现 。 对 浮动 布局 支持 比较 好 
的 是 Firefox 浏 览 器 。 

本 节 创 建 一 个 浮动 布局 ， 其 效果 如 图 14-23 所 示 。 从 页 面 效 果 上 可 以 看 出 当前 页 面 分 为 两 
个 层 ， 一 个 是 左 侧 层 ， 一 个 是 右 侧 层 。 
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14-23 浮动 布局 


【 例 14.5】 实 例文 件 : ch14\14.5.html 


加 创建 HTML 页 面 ， 使 用 DIV 层 布 局 。 
在 HTML 页 面 中 ， 使 用 DIV 将 页 面 划分 为 左 侧 和 右 侧 两 个 部 分 ， 并 将 这 两 个 部 分 放 入 到 
DIV 层 ， 方 便 页 面 布 局 和 排版 ， 代 码 如 下 : 


<html> 

<head> 

<title> 浮 动 布局 </title> 

</head> 

<body> 

<div id="wrap" > 

ado veonmm > 

<h5> 女 人 </h5> 

<p> .减肥 常识 ， 吃 东西 不 胖 反 瘦 的 4 个 时 间 段 10:12</p> 
<p> .清爽 短发 发 型 甜美 升级 【组 图 】16:09 </p> 

<p> .组 图 : 平价 搭配 休闲 韩 风 绽 放 清新 07:32 </p> 

<p> .美丽 加 分 养 出 夏 日 水 润 美 唇 (组 图 ) 13:17</p> 
<p>. 单 恋 热恋 失恋 不 同 恋爱 阶段 的 护肤 对 策 07:18</p> 
<p> . 宽松 雪 纺 衫 摆脱 闷热 怎么 搭 怎么 美 08:24 </p> 
</div> 

<div id="col2" > 

<h5> 标 致 首 款 中 级 车 508PK 大 众 改 款 升级 车 型 新 迈腾 </h5> 
<img src=1.jpg/> 

<Pp> 随 着 7 月 28 日 全 新 一 代 大 众 迈 腾 的 上 市 ， 一 场 激烈 的 战争 随即 打响 。 这 是 一 场 久违 的 战斗 ， 一 个 


是 标致 首 款 中 级 车 型 ， 一 个 是 大 众 改 款 升级 换代 </p> 


布局 


<p>. 有 外 观 也 有 操控 性 的 伤 不 起 福克斯 导购 </p> 

<p>. 自主 品牌 发 力 7 月 上 市 7 款 重量 级 新 车 盘点 [1] </p> 
</h3> 

</div> 

</div> 

</div> 

</body> 


上 面 代码 中 ， 创 建 了 3 个 层 ， 层 wrap 作 为 布局 容器 ，coll 作 为 左 侧 布 局 层 ，col2 作 为 右 侧 


在 IE9.0 中 浏览 效果 如 图 14-24 所 示 ， 可 以 看 到 页 面 自 上 而 下 显示 信息 ， 页 面 布局 非常 混乱 。 
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加 css 定 义 整体 样式 。 


<style> 
#wrapt{ 
height:300px; 
width:410px; 


} 
</style> 


使 用 CSS 代 码 定 义 页 面 整体 样式 ， 即 wrap 中 的 所 有 元 素 ， 代 码 如 下 : 


background:url (87.JPG) repeat-y left top; 


I De sm soy 
rm 副 

A 

-列表 识 ， 吃 本 不 内 区 关 的 4 个 时 间 民 10:13 
-商业 必 攻 测 出 半天 松 【 绍 图 】 16:09 

., 昌 图 ， 平 人 这 本 休 亲 申请 新 07:37 
美丽 加 分 名 夏 日 水 四 关 吕 (组 加 113:1T 

1 单 28 刘 失 赤 不 同 亚 爱 阶 各 的 护 了 对 二 四 :1 
- 宙 模 的 衫 提 脱 站 的 息 和 措 和 和英 09:24 
0 


SS 


下 
有 外 肌 志 有 妇 提 人 的 全 不 避 福 让 新 二 购 
- 自 字 品 角力 ?月 上 市 [重生 可 新 车 组 避 Lt] 


骨 ) CSS 定 义 左 侧 部 分 。 


#coll{ 

float:left; 
width:200px; 
text-align:center; 


margin-right:S5px; 


上 面 代码 定义 了 wrap 层 ， 宽 
在 Firefox 5.0 中 浏览 效果 如 图 14-25 所 示 ， 可 以 看 到 页 面 显示 一 个 背景 图 片 为 蓝 色 的 
域 ， 该 区 域 用 来 存放 左右 两 侧 内 容 。 


ep a 
其 中 加 让 计策 代 


} 
#coll pt{ 
text-align:left; 
font-size:12px; 
color:#123456; 
font-weight:bolder; 
} 


宽度 为 410px， 高 度 为 300px， 并 设置 背景 图 片 ， 图 片 在 y 轴 重复 。 


内 


1 三 机 识 ， 玫 军 本 不 刘 反 划 的 4 人 j 何 民 10412 
江天 【组 罗 】16:09 
加 ,NR 休 玫 和 FE 枚 请 新 o7:32 
1 


图 14-24 使 用 DIV 构 建 布局 14-25 定义 wrap 样式 


使 用 CSS 定 义 页 面 左 侧 部 分 ， 代 码 如 下 : 


border:lpx solid #ddeecc; 


上 面 代码 中 ， 有 DD 选择 器 coll 定 义 了 层 在 左 侧 悬 浮 显示 ， 宽 度 为 200px， 居 中 对 齐 ， 边 框 以 
直线 型 显示 等 。 下 面 的 选择 器 定义 了 字体 样式 ， 例 如 对 齐 方式 、 字 体 大 小 、 字 体 颜 色 和 字体 
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在 Firefox 5.0 中 浏览 效果 如 图 14-26 所 示 ， 可 以 看 到 页 面 蓝 色 区 域 中 ， 左 侧 部 分 以 列表 形 
式 显示 页 面 导 航 链接 。 


自主 品牌 发 力 了 月 上 市 r 款 醒 显 锅 新 车 盆 点 [1 


图 14-26 定义 左 侧 样式 


加 css 定 义 右 侧 部 分 。 
使 用 CSS 代 码 ， 定 义 页 面 右 侧 部 分 样式 ， 代 码 如 下 : 


#col2{ 
float:left; 
width:200px; 
text-align:center; 
border:lpx solid #ddeecc; 
} 
img{ 

float:left; 


下 

#col2 Pi{ 
font-size:13px; 
font-family:" 幼 圆 "; 
line-height:14.5px; 

} 


ID 选 择 器 col2 中 ， 定 义 了 层 的 悬浮 方式 、 宽 度 、 对 齐 方式 和 边框 样式 ，img 选 择 器 中 定义 
图 片 悬 浮 方式 ， 最 后 一 个 选择 器 定义 了 字体 大 小 、 字 体 和 行 高 等 。 

在 Firefox 5.0 中 浏览 效果 如 图 14-23 所 示 ， 可 以 看 到 左右 两 侧 都 在 蓝 色 区 域内 显示 ， 右 侧 
部 分 显示 了 一 个 图 片 ， 其 文字 环绕 图 片 显示 。 


人 有 8 隐藏 布局 


在 有 的 网 站 ， 有 时 根据 需要 会 自动 或 手动 隐藏 一 些 层 ， 从 而 为 其 他 层 节省 显示 空间 ， 这 种 
方式 称 为 隐藏 布局 。 实 现 层 的 手动 隐藏 或 展开 ， 需 要 CSS 代 码 和 JavaScript 代 码 相 结合 来 实现 。 
因为 涉及 了 JavaScript 代 码 ， 本 节 创建 了 一 个 简单 隐藏 布局 ， 用 以 展示 隐藏 布局 的 特点 。 
其 效果 如 图 14-27 所 示 。 
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【 例 14.6】 实 例文 件 : ch14\14.6.html 


构建 HTML 代 码 。 
在 HTML 网 页 中 ， 创 建 了 一 个 DIV 层 ， 用 来 包含 要 显示 的 信息 ， 代 码 如 下 : 


<html> 

<head> 
<title> 隐 藏 布局 </title> 
</head> 

<body> 

<a href="#" onclick="toggle('divl')"> 显 示 / 隐 藏 </a> 
<div id="divl" class="div"> 
<img src=49.jpg> 

<p> 市 场 价 ，390 元 </p> 

<p> 购 买 价 :190 元 </p> 

</div> 

</body> 

</html> 


在 代码 中 ， 创 建 了 一 个 超级 链接 和 一 个 DIV 层 div1，DIV 层 中 包含 了 图 片 和 段落 信息 。 在 
IE9.0 中 浏览 效果 如 图 14-28 所 示 ， 可 以 看 到 页 面 显示 了 一 个 超级 链接 ， 超 级 链接 下 方 显示 了 
一 张 图 片 ， 图 片 下 方 是 段落 信息 。 


图 14-27 隐 源 布局 图 14-28 设置 div 层 


加 添加 CSS 代 码 。 
使 用 CSS 设 置 DIV 层 的 显示 方式 ， 代 码 如 下 : 


<style type="text/css"> 

.div{ border:]lpx #06F solid;height:50px;width:150px;display:none;} 
a {width:100px; display:block} 

</style> 


在 类 选择 器 div 中 ， 定 义 了 边框 样式 、 高 度 和 宽度 ， 并 使 用 display 属 性 设 定 层 不 显示 。 在 
IE9.0 中 浏览 效果 如 图 14-29 所 示 ， 可 以 看 到 只 显示 了 一 个 超级 链接 ， 而 没有 其 他 信息 。 

添加 JavaScript 实 现 层 隐藏 。 

下 面 需 要 添加 JavaScript 代 码 ， 实 现 层 的 手动 显示 和 隐藏 ， 代 码 如 下 : 


7 


<script language="JavaScript" type="text/JavaSscript"> 
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= 三 三 
function toggle (targetid){ 
if (document .getElementById){ 
target=document .getElementById (targetid); 
if (target.style.display=="block"){ 
target.style.display="none™"; 
} else { 
target.style.display="block"; 
} 


} 


</script> 

上 面 代码 首先 根据 ID 名 称 targetid， 判 断 display 的 当前 属性 值 ， 如 果 值 为 block， 则 设置 为 
none; 如 果 值 为 none， 则 设置 值 为 block。 

在 IE9.0 中 浏览 效果 如 图 14-27 所 示 ， 单 击 【显示 /隐藏 】 超 级 链接 ， 会 自动 显示 图 片 相关 
信息 。 


[CI emi pcx|enese -| | 
i 


图 14-29 设 定 CSS 样 式 


14.5 ”新 增 CSS3 多 列 布局 


在 CSS3 没 有 出 来 之 前 ， 网 页 设计 者 如 果 要 设计 多 列 布局 ， 不 外 乎 有 两 种 方式 ， 一 种 是 浮 
动 布局 ， 另 一 种 是 定位 布局 。 浮 动 布 局 比较 灵活 ， 但 容易 发 生 错位 ， 需 要 添加 大 量 的 附加 代码 
或 无 用 的 换行 标记 ， 增 加 了 不 必要 的 工作 量 。 定 位 布局 可 以 精确 地 确定 位 置 ， 不 会 发 生 错位 ， 
但 无 法 满足 模块 的 适应 能 力 。 为 了 解决 多 列 布局 的 难题 ，CSS3 新 增 了 多 列 自 动 布局 功能 。 


下 各 败 ”区 完 度 column-width 


在 CSS3 中 ， 可 以 使 用 column-width 属 性 定义 多 列 布局 中 每 列 的 宽度 ， 可 以 单独 使 用 ， 也 
可 以 和 其 他 多 列 布局 属性 组 合 使 用 。 
column-width 语 法 格式 如 下 : 
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column-width: [<length> | auto] 


其 中 属性 值 <length> 是 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 ，auto 表 示 根 据 
浏览 器 计算 值 自动 设置 。 


【 例 14.7】 实 例文 件 : ch14\14.7.html 


<html> 

<head> 

<title> 多 列 布局 属性 </title> 

<style> 

body{ 
-moz-column-width:300px; /* 兼 容 Webkit 引 擎 ， 指 定 列 宽 是 300 像 素 */ 
column-width:300px; /*CSS3 标 准 化 指定 列 宽 是 300 像 素 */ 


} 
hi{ 
Color:#333333; 

background-color:#DCDCDC; 

padding:5px 8px; 

font-size:20px; 

text-align:center; 

padding:12px; 
} 
h21{ 

font-size:l6px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent:2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 
盼望 着 ， 盼 望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。 
</p><p> 
一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p><p> 
小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 坐 着 ， 
躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄 悄 的 ， 草 软 绵绵 的 。 

</p> 


</body> 

</html> 

在 上 面 代码 的 body 标 记 选 择 器 中 ， 使 用 column-width 指 定 了 要 显示 的 多 列 布局 的 每 列 的 
宽度 。 下 面 分 别 定义 标题 h1、h3 和 段落 p 的 样式 ， 例 如 字体 大 小 、 字 体 颜 色 、 行 高 和 对 齐 方 

在 Firefox5.0 中 浏览 效果 如 图 14-30 所 示 ， 可 以 看 到 页 面 文章 分 为 两 列 显示 ， 列 宽 相 同 。 
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天 全 党 天 天时 下， 到 比特 的 于， 二 本 风 汪汪 和 知 。 牛 闪 上 
和 


朱自清 
则 电 苦 ,内 色 等， 东风 未 了 半天 8 中 近 了 - 


和 开 了 归 - US 末了， 


便 忆 本 儿 ， 可 |， 玫 儿 。 花 焉 二 成 百 的 本 站 这 地 沁 符 ， 
小 GR 习 去 。 团 导 过 地 是 : 六 笠 儿 ， 有 包 字 的 ， 


从 曙 ,信人 旺旺，39E 下 天 全 引 各 ， 社 的 , 闫 名, 走 独 - 


“ 届 丰 贡 各 内”， 丰润 约 ， 信 的 手 乓 并 右 。 风 时 和 未 
的 上 的 站 折 ， 肌 本 表 各 呆 儿 ， 还 各 御 礼 扩 理 ,部 入 歼 放 。。。 吾 天 舍 角 的 再 年 。 有 轩 一 基 人 区 天 和 轨 时 二 本 的 们 上 机 
油 的 守卫 卫 。 与 | 检 关 突 在 村 让 p 汪 中 ， 训 兴 起 二 了 呈 朋 5 。 去 


则 


14-30 设 定 列 宽 


【14.5.2 | 列 数 column-count 


在 CSS3 中 ， 可 以 直接 使 用 column-count 指 定 多 列 布局 的 列 数 ， 而 不 需要 通过 列 宽度 自动 
调整 列 数 。 
column-count 语 法 格式 如 下 : 


column-count: auto | <integer> 


上 面 属性 值 <integer> 表 示 值 是 一 个 整数 ， 用 于 定义 栏目 的 列 数 ， 取 值 为 大 于 0 的 整数 ， 不 
可 以 为 负 值 ，auto 属 性 值 表示 根据 浏览 器 计算 值 自动 设置 。 


【 例 14.8】 实 例文 件 : ch14\14.8.html 


<html> 

<head> 

<title> 多 列 布局 属性 </title> 

<style> 

body{ 
-moz-column-count:3;/*Webkit 引 擎 定义 多 列 布局 列 数 */ 
column-count :3; /*CSS3 标 准 定义 多 列 布局 列 数 */ 


} 
hli 
Color:#3333337 
background-color:#DCDCDC; 
padding:5px 8px; 
font-size:20px; 
text-align:center; 
padding:12px; 
} 
h2{ 
font-size:16px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent:2em;} 
</style> 
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</head> 
<body> 
<hl> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 
盼望 着 ， 有 盼望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。 
</p><p> 
一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p><p> 
小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 坐 着 ， 
躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。 
</p> 


</body> 

</html> 

上 面 的 CSS 代 码 中 ， 除 了 column-count 属 性 设置 外 ， 其 他 样式 属性 和 例 14.7 基 本 相同 ， 就 
不 介绍 了 。 

在 Firefox 5.0 中 浏览 效果 如 图 14-31 所 示 ， 可 以 看 到 页 面 根据 指定 的 情况 显示 了 三 列 布 
局 ， 其 布局 宽度 由 浏览 器 自动 调整 。 


< 有 OO 


去 。 野花 遍地 是 : 杂 样 儿 ， 有 名 静 而 和 平 的 夜 。 在 乡下 ， 小 路 
字 的 ， 没 名 字 的 ， 散 在 花 从 里， 上 ， 石 桥 边 ， 有 挤 起 站 慢 慢 走 着 


像 亚 畏 ， 像 呈 星 ， 还 时 呀 区 的 人 ;还 有 地 显 工 作 的 农民 ， 技 
腑 望 着 ， 险 望 着 ， 东 风 来 的。 着 革 吉 震 笠 ， 他 们 的 草 悍 ， 阳 各 


了 ， 春 天 的 脚步 近 了 - 蔚 玖 的 ， 在 两 里 静默 着 . 
“ 吹 面 不 塞 杨 柳 风 ”， 不 错 


一 切 都 作 刚 具 如 的 样 。 的 ， 像 母亲 的 手 括 换 省 你 。 风 里 
于 ， 欣 欣然 张 开 了 限 。 山 归 光 起 ”这 来 些 新 加 的 泥土 的 气息 ， 混 着 


天 上 风筝 渐渐 多 了 ， 地 上 孩子 也 
多 了 城 里 多 下 ， 训 家 户 户 ， 老 
老 小 小 ， 也 赶 趟 儿 似 的 ， 一 个 个 
都 出 来 了 。 舒 活 舒 活 筋骨 ， 拌 数 
拌 措 精 神 ， 各 做 各 的 一 份 儿 事 
去 ，“ 一 年 之 计 在 于 春 ”; 刚 起 
头 儿 ， 衣 的 是 工夫 ， 有 的 是 希 
望 


来 了 ， 水 泪 起 来 了 ， 太 阳 的 脸红 ”青草 味 儿 ， 还 有 各 种 花 的 香 ， 都 
gs 在 向 哲 济 湿 的 空气 旦 厂 栈 . 马 儿 
小 草 信 信 地 从 土 时 针 出 、 症 困 安 在 策 在 六 叶 当中 ， 高 兴起 
来 ,站 类 的 ， 绿 水 的 ， 因 于 中 ， 来 了 ， 叶 半 引 件 地 雪 乔 清 区 的 只 
田野 里 ， 具 去， 一 大 片 一 大 片 满 晓 ， 唱 出 究 转 的 曲子 ， 跨 轻 风 流 
是 的 。 些 首 ， 局 着 ， 打 两 个 滚 ， 水 记 和 着 。 牛 篆 上 牧 间 的 短 和 ， 
器 几 兽 球 ， 奔 几 霜 趾 ， 提 几 四 类。 这 时候 也 成 天 在 营 训 地 只 春天 像 刚 落地 的 娃娃 ， 
栈 . 风 轻 悄 情 的 ， 草 软 费 强 的 。 者- 从 关 到 时 是 半 的 , 它 生长 者 。 


14-31 设 定 列 数 


区 豆 s 天 访 可 间距 column-gap 


多 列 布局 中 ， 可 以 根据 内 容 和 喜好 的 不 同 ， 调 整 多 列 布局 中 列 之 间 的 距离 ， 从 而 完成 整 
体 版 式 规划 。 在 CSS3 中 ，column-gap 属 性 用 于 定义 两 列 的 间距 。 
column-gap 语 法 格式 如 下 : 


column-gap: normal | <length> 


其 中 属性 值 normal 表 示 根 据 浏览 器 默认 设置 进行 解析 ， 一 般 为 lem; 属性 值 <length> 表 示 
值 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 
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【 例 14.9】 实 例文 件 : ch14\14.9.html 


<html> 
<head> 
<title> 多 列 布局 属性 </title> 
<style> 
body{ 
-moz-column-count:3; /*Webkit 引 擎 定义 多 列 布局 列 数 */ 
column-count:3; /*CSS3 定 义 多 列 布局 列 数 */ 
-moz-column-gap:3em; /*Webkit 引 擎 定义 多 列 布局 列 间距 */ 
column-gap:3em; /*CSS3 定 义 多 列 布局 列 间距 */ 
line-height:2.5em; 
} 
hli 
Color:#333333; 
background-color:#DCDCDC; 
padding:5px 8px; 
font-size:20px; 
text-align:center; 
padding:12px; 
} 
h21{ 
font-size:1l6px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent:2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 
盼望 着 ， 盼 望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。 
</p><p> 
一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p><p> 
小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 坐 


着 ， 躺 着 ， 打 两 个 深 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄 悄 的 ， 草 软 绵绵 的 。 


私有 


</p> 


</body> 

</html> 

上 面 代 码 中 ， 使 用 -moz-column-count 私 有 属性 设 定 了 多 列 布局 的 列 数 ，-moz-column-gap 
属性 设 定 列 间距 为 3em， 行 高 为 2.5em。 

在 Firefox 5.0 中 浏览 效果 如 图 14-32 所 示 ， 可 以 看 到 页 面 还 是 分 为 3 个 列 ， 但 列 之 间 的 距离 


相 比 较 原 来 增 大 了 不 少 。 
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小 的 电 杷 飞 来 飞 去 。 要 花 记 地 。。。 边 ， 有 排 起 令 慢 但 走 兰 的 人 : 
是 : 杂 样 儿 ， 有 名 字 的 ， 没 名。 还 有 地 至 工作 的 农民 ， 技 老区 
字 的 ， 数 在 花 从 至 ， 像 取 质 ， 莹 涯 宕 - 他们 的 训导 ， 适 各 区 
保 旺 旦 ， 还 下 叶 开 的 - 歌 的 ， 在 两 里 葛 加 着 。 。 天 
职 训 车， 及 吝 乔 ， 计 风 上 风 第 渐渐 多 了 ， 地 上 孩子 也 


来 了， 村 天 的 末 步 这 了 - “ 攻 西 不 村 杨 攀 风 ”， 不。 多 了 。 城乡 下 ， 家 家 户 户 ， 


请 的 ， 像 母亲 的 手 醋 模 着 你 - 老 老 小 小 ， 也 起 儿 俊 的 ， 一 
个 个 都 出 来 了 。 千 活 好 活 入 
再 ， 持 粕 持 枉 精神 ， 各 合 各 的 


一 切 者 像 刚 三 本 的 样 风 里 党 来 些 新 翻 的 泥土 的 气 


子 ， 欣 欣然 张 开 了 眼 - 山 裔 泣 卸 ， 澶 着 青草 珠 儿 ， 还 有 各 种 
起 来 了 ， 水 注 起 来 了 ， 太 朵 的 沁 汉 的 空气 
二 2 
和 i 春 ” ， 刚 起 头 儿 ， 有 的 是 工 
小 齐 从 全 地 从 土 里 外 ate 夫 ， 有 的 是 希望 
出 来 ， 尹 烽 的， 绿绿 的 。 轩 子 。 伴 地 卖弄 酒 的 取 紧 ， 唱 出 


里 ， 田 野 旦 ， 路 二 ， 一 大 片 ~ 。。 转 的 曲子 ， 允 轻 风 流水 应 和 信友 的 和 
大 用 扩 是 的 。 此 着 ， 册 着 ， 打 de 这 时 。。。 妊 ， 从 头 到 如 者 是 新 的 , 它 生 
两 个 谅 ， 吕 几 团 球 ,要 几 粒 俱 也 成 天 在 味 克 地 用 着 。 长 车 


图 14-32 设 定 列 间距 


人 ZW 列 边框 样式 column-rule 


边框 是 样式 属性 中 不 可 缺少 的 属性 之 一 ， 通 过 边框 可 以 容易 地 界定 边框 内 容 ， 从 而 划分 
不 同 的 区 域 。 在 多 列 布局 中 ， 同 样 可 以 设置 多 列 布局 的 边框 ， 用 于 区 分 不 同 的 列 数 。 在 CSS3 
中 ， 边 框 样式 使 用 coumn-mle 属 性 定义 ， 包 括 边框 宽度 、 边 框 颜 色 和 边框 样式 等 。 
coumn-rule 语 法 格式 如 下 : 


column-rule: <length> | <style> | <color> 
其 中 属性 值 的 含义 如 表 14-1 所 示 。 
表 14-1 column-rule 属 性 值 


2 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 用 于 定义 边框 宽度 ， 其 功能 和 column- 
rule-width 属 性 相同 

<style> | 定义 边框 样式 ， 其 功能 和 column-rule-style 属 性 相同 

<color> | 定义 边框 颜色 ， 其 功能 和 column-rule-color 属 性 相同 


为 了 方便 网 页 设计 灵活 的 边框 ，CSS3 在 column-rule 属 性 的 基础 上 派生 了 3 个 列 边框 属 
性 ， 分 别 为 column-rule-width、column-rule-style 和 column-rule-color 属 性 值 。 

column-rule-color 属 性 用 于 定义 边框 颜色 ， 其 颜色 值 接受 CSS3 支 持 的 所 有 颜色 值 。 
column-rule-width 属 性 定义 边框 宽度 ， 其 属性 值 可 以 是 任意 浮 点 数 。column-rule-style 定 义 边 
框 样式 ， 其 属性 值 和 border-style 属 性 值 相同 ， 即 包括 none、hidden、dotted、dashed、solid、 


double、groove、ridge、inset 和 ouset。 
【 例 14.10】 实 例文 件 : ch14\14.10.html 


<html> 
<head> 
<title> 多 列 布局 属性 </title> 


<style> 
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body{ 
-moz-column-count:37 
column-count:3; 
-moz-column-gap:3em; 
column-gap:3em; 
line-height:2.5em; 
-moz-column-rule:dashed 2px gray;/*Webkit 引 擎 定义 多 列 布局 边框 样式 */ 
column-rule:dashed 2px gray; /*CSS3 定 义 多 列 布局 边框 样式 */ 
} 
hi{ 
Color:#333333; 
background-color:#DCDCDC; 
padding:5px 8px; 
font-size:20px; 
text-align:center; 
padding:12px; 
} 
h21{ 
font-size:l16px;text-align:center; 
} 
p{color:#333333;font-size:14px;line-height:180%;text-indent:2em;} 
</style> 
</head> 
<body> 
<h1> 春 </h1> 
<h2> 朱 自 清 </h2> 
<p> 
盼望 着 ， 盼 望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。 
</p><p> 
一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 来 了 。 
</p><p> 
小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 片 满 是 的 。 坐 
着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄 悄 的 ， 草 软 绵绵 的 。 
</p> 
</body> 
</html> 


在 body 标 记 选 择 器 中 ， 定 义 了 多 列 布局 的 列 数 、 列 间距 和 列 边框 样式 ， 其 边框 样式 是 灰 
色 破 折线 样式 ， 宽 度 为 2px。 

在 Firefox 5.0 中 浏览 效果 如 图 14-33 所 示 ， 可 以 看 到 页 面 列 之 间 添加 了 一 个 边框 ， 其 样式 
为 破 折线 。 


人 、m 通 DIV+CSS3 网 页 布局 与 样 式 


< J EE nr EE Er 


Tm wm 
小 的 晓 力 飞 来 飞 去 。 村 花 庆 地 。 ， 边 ， 有 振 起 售 慢 慢 走 首 的 人 ; 

， 是 : 条 样 儿 ， 有 名 字 的 ， 没 名 。 ， 还 有 地 里 工作 的 农民 ， 技 省 蒙 

! 字 的 ， 散 在 花 从 至 ， 像 原 瑚 ，。 ) 并 着 笠 。 他 们 的 草 屋 ， 和 天 天 

! 像 星 星 ， 还 荆 路 本 的 | 下 的 ， 在 十 里 关 默 着 。 。 天 

难 望 着， 盼望 老 , 东风 ， 上 风 革 渐渐 多 了 ， 地 上 孩子 也 


来 了 ， 大 天 的 襄 步 近 了 - | “ 史 面 不 罕 杨 移 风 ”, 不。 ; 多 了 。 城 时 乡下， 家家户户， 上 


1 错 的 ， 像 生 亲 的 手 丘 措 省 你 。 Er 
个 个 部 出 来 了 。 舒 活 千 活 盘 

， 骨 ， 拉 扳 拉 撤 铺 神 ， 各 和 各 的 

， 一 份 儿 事 去 ，“ 一 年 之 计 在 于 

: 3 ; 春 ”; 刚 起 头 儿 ， 有 的 是 工 
小 草丛 从 地 从 土 时 针 。 叶 当 中 ， 高 兴起 来 了 ， 呼 朋 引 。 ; ， 有 的 是 希望 

出 来， 由 才 的 ， 旦 绿 的 。 团 于。 } 件 闻 交 系 清 朋 的 中 肛 , 唱 出 网 。 

里 ， 田 野 里， 了 此 去 ， 一 大 片 。 ; 转 的 南 子 ， 跟 轻 风 流水 应 和 ， 春天 像 风沙 地 的 娃 

大 二 消 是 的 、 天 二 着， 打 。 ， 尝 ” 千 背 上 多 各 的 泽 生 ， 这 时 。 夸 ， 从 头 到 用 是 新 的 ， 它 生 

两 个 演 ， 器 几 各 球 ， 半 几 赴 。。 人 也 成 天 在 了 充 地 响 普 . ， 长 着 。 


一 切 都 像 网 三 本 的 样 。 ， 风 里 带 来 些 新 德 的 泥 士 的 气 
了 于， 欣欣 然 张 开 了 妇 。 山 最 润 。 ; 总， 混 着 青 章 株 儿 ， 还 有 各 种 
了 ,太阳 的 。。 ， 花 的 香 ， 都 在 油 微 润 光 的 空气 
! 里 配 酸 。 乌 儿 将 昔 安 在 繁花 晤 


图 14-33 定义 边框 样式 


人 6 综合 实例 { 一 一 模拟 起 点 中 文 网 布局 


在 复杂 的 首页 中 ， 往 往 不 是 一 种 单一 的 结构 ， 而 是 多 种 布局 混合 排版 ， 其 中 多 列 排版 布 
局 是 不 错 的 选择 。 本 实例 模拟 起 点 中 文 网 首页 中 一 个 左 中 右 排版 的 布局 ， 其 中 左 侧 、 右 侧 和 
中 部 3 个 DIV 容器 宽度 固定 ， 具 体 步骤 如 下 所 示 。 

分 析 需 求 。 

创建 一 个 左 中 右 3 列 布局 ， 现 在 有 3 种 方式 ， 一 种 是 浮动 布局 ， 一 种 是 定位 布局 ， 还 有 一 
种 是 CSS3 的 多 列 布局 。 这 里 使 用 了 浮动 布局 ， 并 固定 左 中 右 三 侧 宽度 。 实 例 完成 后 效果 如 图 
14-34 所 示 。 

轧 创建 HTML 网 页 ， 使 用 DIV 层 分 块 。 

从 图 14-34 的 效果 可 以 看 出 ， 需 要 使 用 3 个 层 分 别 设置 左 侧 内 容 、 中 间 内 容 和 右 侧 内 容 ， 
并 将 这 3 个 DIV 层 都 保护 在 一 个 DIV 布 局 容器 中 ， 方 便 排版 和 调整 。 其 代码 如 下 : 


<html> 
<head> 
<title> 左 中 右 版 式 </title> 
</head> 
<body> 
<div class="big"> 

<div class="left"> 

<h3> 月 票 PK 榜 </h3> 

<table border=0 width=178px> 

<tr><td align=left> 我 的 老婆 是 军阀 </td><tqd align=right>719</td></tr> 
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<tr><td align=left> 仙 绝 </td><td align=right>329</td></tr> 
<tr><td align=left> 大 魔神 </td><td align=right>322</td></tr> 
<tr><td align=left> 最 强 掌 门 </td><td align=right>253</td></tr> 
<tr><td align=left> 术 士 的 幸福 生活 </td><td align=right>225</td></tr> 
<tr><tad align=left> 超 级 电能 </td><tqd align=right> 223</td></tr> 
<tr><td align=left> 超 级 警官 </td><td align=right> 203</td></tr> 
<tr><td colspan=2 align=right> 更 多 >></td></tr> 
</table> 
</div> 
<div class="middle"> 
<h3> 图 书 专题 </h3> 
<p class=title> 离 婚 妈妈 的 快乐 情缘 如 果 不 能 好 好 爱 </p> <p class=content> 故 
事 的 主角 叫 许可 。30 岁 ， 失 业 ， 离 婚 ， 还 带 个 孩子 ,一夜 之 间 ， 世 界 上 所 有 倒霉 的 事情 都 找 上 门 来 . . .<a 
href=""> [更 多 内 容 ]</a> 
</p> 
<p class=title> 著 名 作家 陈 丹 燕 的 心灵 旅程 我 要 游 过 大 海 </p> 
<p class=content> 游 历 世界 各 地 ， 然 后 记叙 成 书 ， 陈 丹 燕 爱尔兰 旅行 散 集 《 我 要 游 过 大 海 》， 讲 
述 爱尔兰 的 传奇 。<a href=""> [更 多 内 容 ]</a></p> 
</div> 
<div class="right"> 
<img src=98.jpg > 


<p> 阴 差 阳 错 ， 陈 默然 回 到 了 八国 联军 那 会 …… 
</div> 

</div> 

</body> 

</html> 


上 面 代码 定义 了 big 层 作为 布局 容器 ，left 层 作为 左 侧 容器 ，middle 层 作为 中 间 容 器 ，right 
层 作为 右 侧 容器 。 

在 IE9.0 中 浏览 效果 如 图 14-35 所 示 ， 可 以 看 到 页 面 信息 从 上 到 下 自动 排列 ， 没 有 任何 修 
饰 样式 。 


es 


故事 的 省 四 可 30 岁 失业， 离婚 于 
329 认 之 辣 ， 世 界 上 所 有 倒 各 的 事情 都 找 上 门 来 .. [更 多 内 容 


322| 著名 作家 陈 Se 灵 旅 程 我 可 游 过 大 


LELE 


过 
善 历 世界 各地， 部 后 记 公 成 蔬 ， 陈 斤 于 爱尔兰 旅行 散 入 
《我 要 游 过 大 海 》 ， 讲 述 爱尔兰 的 稚 奇 。| 量 任 肉 安 ] 之 


地 太 隐 主 角 思 计 可 区， 拓 业 大 过 芝 人 于 于- 玉 之 则 世界 上 有 便条 情 上门 非 [三 二] 
攻 和 人 于 了 及 从 押 届 和 要 洛 过 大 


出 


14-34 左 中 右 三 列 布局 图 14-35 DIV 层 划分 块 
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国 添加 CSS 代 码 ， 定 义 全 局 样式 。 

<style> 

ol 
padding:0px; 
margin:0px; 

} 

body { 
font-family: "宋体 "; 
font-size:]12px; 

} 

.big { 
width:900px; 
margin:0 auto 0 auto; 
height:300px; 

} 

</style> 


上 面 代码 定义 了 全 局 的 显示 样式 ， 例 如 body 标 记 选 择 器 中 定义 了 字形 为 “宋体 ”， 文 字 
大 小 为 12px。 在 类 选择 器 big 中 定义 了 布局 容器 宽度 为 900px， 高 度 为 300px， 上 下 外 边 距 为 
0， 左 右 外 边 距 自动 调整 。 
在 下 9.0 中 浏览 效果 如 图 14-36 所 示 ， 可 以 看 到 字体 变 小 ， 网 页 在 一 定 范围 内 显示 。 
添加 CSS 代 码 ， 定 义 左 侧 样式 。 
Left 
width:178px; 
float:left; 
height:200px; 
border:lpx solid #CBCBCB; 


} 
sieft hn3F 
background-color:E9E9E9; 
text-align:left; 
font-weight:bolder; 
} 
ieft table ta 
list-style-type:none; 
font-size:15px; 
border-bottom:lpx dotted #ddeecc; 
color:#234628; 
font-family: "宋体 "; 
' 


上 面 代码 中 ， 选 择 器 left 定 义 了 层 宽度 为 178px， 高 度 为 200px， 在 网 页 左边 浮动 布局 。 下 
机 分 别 定义 标题 h3 和 表格 单元 格 的 显示 样式 ， 例 如 对 齐 方式 、 文 字 大 小 、 边 框 样式 等 。 

在 IE9.0 中 浏览 效果 如 图 14-37 所 示 ， 可 以 看 到 页 面 左 侧 以 绿色 字体 显示 ， 并 且 每 行文 本 
下 面 带 绿色 边框 。 
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和 
和 eh 


re. Em et et FF. Me 
人 


TE 和 短 放生 er 


图 14-36 定义 全 局 样式 图 14-37 定义 左 侧 样式 


添加 CSS 代 码 ， 定 义 中 间 样 式 。 


.middle { 
width:538px; 
float:left; 
height:200px; 
border:lpx solid #CBCBCB; 


.middle h3{ 
background-color:red; 
width:80px; 


titie{ 
font-size:16px; 
color:red; 
text-align:center; 


.content{ 
text-indent:2em; 
line-height:12px; 
font-size:13px; 


上 面 代码 中 ， 选 择 器 middle 定 义 了 中 间 宽 度 为 538px， 高 度 为 200px， 边 框 样式 和 浮动 布 
他 选择 器 对 背景 色 、 对 齐 方式 、 颜 色 、 行 高 和 缩减 进行 了 定义 。 
在 IE9.0 中 浏览 效果 如 图 14-38 所 示 ， 可 以 看 到 中 间 部 分 带 有 边框 显示 ， 边 框 中 以 红色 显 
示 标 题 信息 ， 段 首 缩减 两 个 文字 。 
国 添加 CSS 代 码 ， 定 义 右 侧 样式 。 
.right { 
width:178px; 
float:left; 
height:200px; 
text-align:center; 


局 。 
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border:lpx solid #CBCBCB; 
» 


img{ 
float:left; 
max-height:80px; 

} 

.right pt{ 
font-size:10px; 
text-indent:2em; 

上 


上 面 right 选 择 器 定义 右 侧 容 器 宽度 为 178px、 高 度 为 200px、 居 
和 边框 样式 。 下 面 选择 器 对 图 片 和 段落 进行 样式 定义 。 

在 IE9.0 中 浏览 效果 如 图 14-34 所 示 ， 可 以 看 到 页 面 3 个 矩形 框 并 列 在 页 面 显示 ， 右 侧 显 示 
了 一 张 图 片 和 段落 ， 文 本 信息 环绕 图 片 显示 。 


Ph 对齐 、 浮 动 在 左 侧 显示 


站 EEC le 二 


应 
2 到 


低 w 
最 强 革 门 
术士 的 站 福生 活 
超级 由 能 
直 级 营 富 


Er iy 
天 之 人 4， 四 下 灵 再 民间 时 看; 所 来 人 全 元 过 开化 作 畏 卫 与 。 由 花 外 作 红心 间 。 看 访 ， 一 提 册 ,黄村 [1 全 


图 14-38 定义 中 间 样 式 


fi 


人 :7 ”综合 实例 2 一 一 电子 企业 首页 


小 型 企业 网 站 往往 非常 简单 ， 导 航 信息 不 多 但 要 求 突出 主题 。 本 实例 模拟 一 个 电子 企业 
首页 ， 总 体 上 是 上 中 下 结构 ， 中 间 采 取 左 右 版 式 ， 具 体 步 骤 如 下 所 示 。 
分 析 需 求 。 


创建 一 个 一 个 上 中 下 的 布局 ， 再 加 上 中 间 的 左右 版 式 ， 需 要 5 个 DIV 层 。 实 例 完成 后 ， 页 
面 效果 如 图 14-39 所 示 。 


加 创建 HTML 网 页 ， 使 用 DIV 层 分 块 。 


<htm1> 

<head> 
<title> 两 列 布局 </title> 
</head> 

<body> 


<div class="big"> 
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<div class="nav"> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 企 业 新 闻 </a></1i> 
<1i><a href="#"> 视 听 新 闻 </a></1i> 
<1i><a href="#"> 市 场 快讯 </a></1i> 
<1i><a href="#"> 投 资 导 引 </a></1i> 
<1i><a href="#"> 每 天 报道 </a></1i> 
</ul> 
</div> 
<div class="main"> 
<div class="left"> 
<div class="wen"> 


<h1> 中 国电 子 首次 入 选 《 财 富 》 世 界 500 强 </hl1> 
<p>7 月 7 日 ， 美 国 《 财 富 》 杂 志 发 布 2011 年 度 世 界 500 强 企业 排名 ， 中 国电 子 信 息 产 业 


集团 有 限 公司 首次 入 选 世界 500 强 企业 …… 
</p> 
</div> 
</div> 


<div class="right"> 
<img src="b0.jpg" border="0" /> 
<p>《 精 算 商 业 管 理 系 统 》 针 对 中 小 企业 的 特点 ， 集 进 销 存 财务 管理 一 体 化 。 帮 助 企 
业 全 面 管理 商品 帐 、 资 金 帐 、 往 来 帐 、 费 用 帐 …… 
</p> 
</div> 
</div> 
<div class="foot"> 
<p>2011 郑州 水 月 网 页 工作 室 版 权 所 有 </p> 
</div> 
</div> 
</body> 
</html> 


上 面 代码 中 ，big 层 是 一 个 布局 容器 ， 用 来 存放 其 他 DIV 层 ; nav 层 用 来 作为 页 头 部 分 ; 
main 层 是 网 页 主体 ， 包 含 两 个 DIV 层 ;left 层 为 页 面 主体 左 侧 ; right 层 为 页 面 主体 右 侧 ; foot 


层 表 示 页 脚 部 分 。 
在 IE9.0 中 浏览 效果 如 图 14-40 所 示 ， 可 以 看 到 自 上 而 下 排列 ， 上 面 是 超级 链接 信息 ， 下 


面 是 文本 和 图 片 。 


| 下 国电 子 首次 入 秋 《财富 》 世界 500 强 :让 
eter fletcher 
aomaaa .eA A kt waszswsRNagonatum 中 国电 子 首次 入 选 《 财 富 》 世 界 500 强 
和 贡 1 旧 ， 关 国 《 对 宣 》 闻 二 友 布 2011 征 放任 办 500 验 企业 振 侣 ， 中 国 中 子 信息 产业 条 团 有 限 基 可 上 议和 信 彼 世界 Bo03 企 业 ， LTLeZ 
| 


2 


He 
a 


于 近 打折 大考 和 分 


14-39 电子 企业 首页 图 14-40 基本 HTML 页 面 


网 
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国 添加 CSS 修 饰 整体 样式 。 


padding:0px; 
margin:0px; 
} 
body{ 
font-family:" 宋 体 "; 
font-size:12px; 
} 
-big{ 
width:900px; 
margin:0 auto 0 auto; 


} 


上 面 代码 定义 了 全 局 样式 ， 例 如 网 页 上 字体 为 宋体 ， 文 字 大 小 为 12px， 内 外 边 距 都 是 
0px。 在 big 选 择 器 中 ， 定 义 整个 布局 容器 宽度 为 900px。 

在 IE9.0 中 浏览 效果 如 图 14-41 所 示 ， 可 以 看 到 页 面 字体 变 小 并 以 宋体 显示 。 

加 添加 CSS， 修 饰 页 头 部 分 。 


.nav{ 
background-color:#C2E3E9; 
width:800px; 
height:80px; 

background-image:url (80.jpg); 
} 

:nav ul{ 
list-style-type:none; 
} 

.nav 1i{ 
float:left; 

. 

.nav af 
display:block; 
width:120px; 
height:20px; 
line-height:20px; 
text-align:center; 
color:#6600CC; 
text-decoration:none; 
} 

.nav a:hovert{ 
width:120px; 
height:20px; 
color:#990000; 
background-color:#CCCCCC; 
} 


加 


在 选择 器 nav 中 ， 定 义 了 背景 色 、 背 景 图 片 、 宽 度 和 高 度 。 下 面 的 选择 器 分 别 定义 了 导航 
菜单 的 显示 样式 ， 例 如 无 序列 表 不 显示 符号 、 字 体 大 小 、 颜 色 、 对 齐 方式 和 行 高 等 。 
在 IE9.0 中 浏览 效果 如 图 14-42 所 示 ， 可 以 看 到 页 面 项 部 显示 了 一 个 图 片 ， 其 导航 菜单 在 
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图 片 顶部 显示 。 


中 国电 子 首次 入 选 《 财 富 ) 世界 500 强 


Ee sn ra emer se ta 


a 
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Se 


14-41 定义 全 局 样式 


辆 添加 CSS， 修 饰 页 面 


.maint{ 
width:800px; 
height:400px; 
} 

> 
width:618px; 
float:left; 
height:400px; 


主体 。 


text-align:center; 
border:lpx solid #cbcbcb; 


} 
.left img{ 


margin:l0px 0 10px 0; 


} 
.left pt{ 


.right{ 
width:178px; 
float:left; 
height:400px; 


text-align:center; 


border:lpx solid 
’ 
.right pt{ 
七 


text-indent:2em; 
text-align:left; 
font-size:13px; 
line-height:30px; 


; 


#cbcbcb; 


ext-indent:2em; 


font-size:13px; 


} 
上 面 代 码 中 ，main 选 择 器 
页 主体 左 侧 部 分 样式 ， 例 如 宽 
选择 器 定义 页 


于 


中 国电 子 首 次 入 选 《 财 富 》 0 
A 


14-42 定义 页 头 部 分 


定义 中 间 容 器 整体 宽度 为 800px， 高 度 为 400px; lef 选 择 定义 网 


度 为 618px， 高 度 为 400px，Hoat 指 定 di 
主体 右 侧 部 分 ， 例 如 宽度 为 178px、 高 度 为 400px、 文 本 居中 对 齐 等 。 


Vv 层 在 左 侧 浮动 布局 ;right 
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在 IE9.0 中 浏览 效果 如 图 14-43 所 示 ， 可 以 看 到 页 面 中 间 部 分 分 为 两 个 边框 显示 ， 左 侧 部 
分 显示 了 段落 信息 ， 右 侧 部 分 显示 了 图 片 和 文本 信息 。 
国 添加 CSS， 修 饰 页 脚 部 分 。 


Foott 
height:15px; 
text-align:center; 
下 

.foot pf{ 


font-style:italic; 

font-size:10px; 

width:800px; 
text-align:center; 


下 
上 面 代码 定义 了 页 脚 部 分 显示 样式 ， 例 如 页 脚 高 度 为 13px、 文 本 居中 对 齐 、 段 落 样式 中 


文字 大 小 为 10px、 居 中 对 齐 等 。 
在 IE9.0 中 浏览 效果 如 图 14-39 所 示 ， 可 以 看 到 页 脚 部 分 居中 显示 ， 其 字体 以 斜体 显示 。 


< TE 
而 Hl 


中 国电 子 首 次 入 选 《财富 》 世 界 500 强 
TE 和 人 on 和， 下 了 人 产业 
nr 6 入 09 五， 中国 四 了 和 和 
本， 一 全力 国人 


图 14-43 定义 主体 部 分 


14:8 ”综合 实例 3 一 一 汽车 网 站 首页 


汽车 网 站 是 现在 网 站 的 主流 之 一 ， 一 般 用 于 宣传 和 展示 新 车 信息 。 本 实例 模拟 一 个 汽车 
站 首页 ， 具 体 步骤 如 下 所 示 。 

分 析 需 求 。 

创建 一 个 上 中 下 结构 网 页 ， 如 果 宽 度 固定 就 非常 容易 了 。 这 里 需要 创建 4 个 div 层 ， 一 个 
用 来 作为 布局 容器 ， 另 外 3 个 分 别 对 应 上 中 下 三 块 。 实 例 完成 后 效果 如 图 14-44 所 示 。 


司 
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创建 HTML， 使 用 div 层 分 块 。 


<html> 
<head> 
<title> 汽 车 首页 </title> 
</head> 
<body> 
<div class="big"> 
<div class="1ogo"> 
<img src="26.jpg" /> 
</div> 
<div class="up"> 
<br /> 
<h1> 深 圳 三 维 比亚迪 荣誉 呈现 F6 大 运 尊 享 版 
</h1> 
<p> 浓 情 七 月 ， 魅 力 八 月 …… 
</p> 
<p> F6 作 为 比亚迪 的 首 款 中 高 级 战略 车 型 …*… </p> 
</div> 
<div class="foot"> 
<br /> 
<p><a href="#"> 首 页 </a> | <a href="#"> 论 坛 </a> | <a href="#"> 图 库 
</a> | <a href="#"> 二 手 车 </a> | <a href="#"> 团 购 </a></p> 
<p>2011 &gcopy; 郑州 水 月 工作 室 技术 支持 </p> 
</div> 
</div> 
</body> 
</html> 


上 面 代码 中 ， 定 义 了 4 个 层 ， 其 中 big 层 作为 布局 容器 ，logo 层 作为 页 头 部 分 ，up 层 作为 
页 面 主体 ，foot 层 页 脚 部 分 。 

在 IE9.0 中 浏览 效果 如 图 14-45 所 示 ， 可 以 看 到 页 面 从 上 到 下 显示 3 个 部 分 ， 包 括 图 片 、 段 
落 和 导航 菜单 。 


mmm exe 


深圳 三 维 比 亚 这 梨 准 呈现 F6 大 运 坦 训 版 上 | na 志 烛 基站 人 人 囊 区 0 
nt sangria ES i 


rT 


HE: 
nd 


. pa 
te | | 天 和 


是 1 诠 1 王 1= 扩 1 邓 
Le 1 ) = 1 li oNKRI 宇 竹村 竺 


ap 


图 14-44 汽车 网 站 首页 图 14-45 基本 HTML 页 面 


国 添加 CSS 样 式 ， 定 义 全 局 样式 。 
<style> 
> 

padding:0px; 
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margin:0px; 

上 

body { 
font-family:" 宋 体 "; 
font-size:12px; 

} 

-big { 
width:800px; 
margin:0 auto 0 auto; 

} 

</style> 


上 面 代 码 中 ，body 选 择 器 中 定义 了 页 面 字 体 为 宋体 ， 字 体 大 小 是 12px，big 选 择 器 中 定义 
了 布局 容器 宽度 为 800px 和 外 边 距 等 。 
在 IE9.0 中 浏览 效果 如 图 14-46 所 示 ， 可 以 看 到 图 片 和 文字 居中 显示 ， 并 且 字 体 大 小 发 生 
变化 。 
加 添加 CSS 样 式 ， 修 饰 页 头 部 分 。 
.logo { 
width:800px; 
height:100px; 
} 
上 面 代码 中 ， 选 择 器 logo 定 义 页 头 部 分 ， 宽 度 为 800px， 高 度 为 100px。 此 页 面 只 是 
高 度 发 生变 化 ， 这 里 就 不 再 显示 了 。 
辆 添加 CSS 样 式 ， 修 饰 中 间 样式 。 
-up{ 
width:800px; 


margin:5px auto 20px auto; 
border:#0066FF lpx solid; 


赔 
oF 


} 
.up hl{ 
font-size:18px; 
text-align:center; 
margin-bottom:10px; 
} 
:up p{ 
text-indent:2em; 


} 
上 面 代码 中 ，up 选 择 器 定义 了 页 面 主体 宽度 、 边 框 样式 和 外 边 距 等 。 下 面 选 择 器 定义 了 


标题 颜色 。 
在 IE9.0 中 浏览 效果 如 图 14-47 所 示 ， 可 以 看 到 页 面 主体 部 分 以 边框 形式 显示 ， 段 首 缩 进 
两 个 字符 显示 。 
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水 届 三 村 比 盏 过 杂 共 呈现 76 大 运 总 字 上 
I te 


14-46 定义 全 局 样式 图 14-47 定义 页 面 主 体 样式 


添加 CSS 样 式 ， 修 饰 页 脚 部 分 。 


.foot{ 
width:800px; 
height:80px; 
text-align:center; 
margin-top:S5px; 
} 
faot pt 
margin-bottom: Spx; 
font-style:italic; 
} 
at 
line-height:20px; 
color:#000000; 
text-decoration:none; 
text-align:center; 
上 
a:hoveri{ 
Color:#0000FF; 
text-decoration:underline; 


i 


上 面 代码 中 ，foot 选 择 器 定义 了 页 脚 部 分 宽度 为 800px， 高 度 为 80px， 文 本 居中 对 齐 ， 上 
外 边 距 为 3px。.foot p 和 a:hover 选 择 器 分 别 定义 了 段落 、 超 级 链接 的 显示 样式 。 

在 IE9.0 中 浏览 效果 如 图 14-44 所 示 ， 可 以 看 到 页 脚 部 分 显示 了 一 个 简单 的 导航 菜单 和 版 
权 信息 ， 文 字 以 斜体 显示 。 
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俐 9 专家 解 惑 


1. 下 浏览 器 和 Firefox 浏 览 器 ， 显 示 foat 浮 动 布局 会 出 现 不 同 的 效果 ， 为 什么 ? 

两 个 相连 的 DIV 块 ， 如 果 一 个 设置 为 左 浮动 ， 一 个 设置 为 右 浮动 ， 这 时 在 Firefox 浏 览 
器 中 就 会 出 现 设 置 失效 的 问题 。 其 原因 是 IE 浏 览 器 会 根据 设置 来 判断 float 浮 动 ， 而 在 Firefox 
中 ， 如 果 上 一 个 loat 没 有 被 清除 的 话 ， 下 一 个 float 会 自动 沿用 上 一 个 float 的 设置 ， 而 不 使 用 自 
己 的 float 设 置 。 

这 个 问题 的 解决 办 法 就 是 ， 在 每 一 个 DIV 块 设置 float 后 ， 在 最 后 加 入 一 句 清除 浮动 的 代 
码 clear:both， 这 样 就 会 清除 前 一 个 浮动 的 设置 了 ， 下 一 个 float 也 就 不 会 再 使 用 上 一 个 浮动 设 
置 ， 从 而 使 用 自己 所 设置 的 浮动 了 。 

2. DIV 层 高 度 是 设置 好 还 是 不 设置 好 ? 

在 IE 浏览 器 中 ， 如 果 设 置 了 高 度 值 ， 但 是 内 容 很 多 ， 会 超出 所 设置 的 高 度 ， 这 时 浏览 器 
就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限制 。 而 在 Firefox 浏 
览 器 中 ， 如 果 固 定 了 高 度 的 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 ， 就 算 内 容 过 多 ，DIV 也 不 会 
撑 开 ， 也 会 显示 全 部 内 容 ， 但 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 那 么 这 一 块 就 会 与 下 一 块 内 容 
重合 。 

这 个 问题 的 解决 办 法 就 是 ， 不 设置 高 度 的 值 ， 这 样 浏览 器 就 会 根据 内 容 自动 判断 高 度 ， 
也 就 不 会 出 现 内 容重 合 的 问题 。 
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DIV+CSS3 
布局 实战 


本 章 引言 


DIV+CSS 是 一 种 网 页 布局 方法 ， 这 种 网 页 布局 方法 有 别 于 
传统 的 Table 布 局 ， 真 正 地 达到 了 W3C 提 倡 的 内 容 与 表现 相 分 
离 。 本 章 将 进一步 介绍 利用 CSS3 样 式 进行 DIV+CSS 网 页 布局 的 
知识 。 


a 


外 
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人 ms 通 DIV+CSS3 网 页 布局 与 样式 


15.1 DIV 布局 优势 


随 着 Web 标 准 化 设计 理念 的 普及 ， 国 内 很 多 大 型 门户 网 站 已 经 纷纷 采用 DIV+CSS 制 作 方 
法 ，DIV+CSS 布 局 是 网 页 设计 中 的 一 种 布局 方式 ， 和 HTML 网 页 设计 语言 中 的 表格 〈Table) 
定位 布局 作用 类 似 。 在 网 站 新 设计 标准 中 ， 不 再 使 用 表格 定位 技术 ， 而 是 采用 DIV+CSS 的 方 


式 实 现 各 种 定位 。 
使 用 DIV+CSS 布 局 ， 有 以 下 优势 : 
(1) 符合 W3C 标 准 。 这 保证 网 站 不 会 因为 将 来 网 络 应 用 的 升级 而 被 淘汰 。 
(2) 大 大 缩减 页 面 代 码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 


(3) 样式 调整 更 加 方便 。 内 容 和 样式 的 分 离 ， 使 页 面 和 样式 的 调整 变 得 更 加 方便 。 在 团队 


开发 中 更 容易 分 工 合作 而 减少 相互 关联 性 。 


(4) 轻松 控制 页 面 布局 ， 方 便 维护 ， 可 以 将 许多 网 页 的 风格 样式 同时 更 新 ， 不 页 


页 地 更 新 了 。 可 以 将 站 点 上 所 有 的 网 页 风格 统一 使 用 一 个 CSS 文 件 进行 控制 ， 只 要 修改 这 个 


CSS 文 件 中 相应 的 行 ， 整 个 站 点 的 所 有 页 面 的 效果 都 会 随 之 发 生变 化 。 


(5) 搜索 引擎 更 加 友好 。 相 对 于 传统 的 Table， 采 用 DIV+CSS 技 术 的 网 页 ， 对 于 搜索 引擎 


的 收录 更 加 友好 ， 结 构 更 加 清晰 ， 容 易 被 搜索 引擎 搜索 到 ， 优 化 了 SEO。 


伤 22 综合 实例 1 一 一 家 庭 相册 


本 节 将 使 用 CSS 样 式 创建 一 个 常用 的 家 庭 相册 。 由 于 目前 下 浏览 器 对 CSS3 标 准 支持 力度 


不 够 ， 故 此 相册 不 能 在 正 浏览 器 显示 ， 具 体 步骤 如 下 所 示 。 
分 析 需 求 


本 实例 模拟 百度 图 片 中 图 片 的 显示 样式 ， 分 为 显示 图 片区 域 和 图 片 列表 区 域 ， 即 布 
左右 版 式 。 实 例 完成 后 ， 效 果 如 图 15-1 所 示 。 
加 构建 HTML 页 面 ， 使 用 DIV 搭建 框架 。 


<html> 

<head> 

<title> 图 片 布 局 </title> 

</head> 

<body> 

<div id="info"> 
<h3> 儿 童 相册 </h3> 


<div id="zs"> 


局 为 
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<ul> 
li><a href=™"" class="B1 Z" ><span><img src="alsjpg™ /><br /> 
ok， 可 以 拍 了 !<br /> 
</span></a></1i> 
<li><a href="" class="b2 z"><span><img src="a2.jpg"/><br /> 
听 ， 这 是 什么 声音 呀 ? <br /> 
</span></a></1i> 
<li><a href="" class="b3 z"><span><img src="a3.jpg" /><br /> 
我 想 要 <br /> 
</span></a></1i> 
<li><a href="" class="b4 2z"><span><img src="a4.jpg" /><br /> 
放炮 了 ， 哈 ，<br /> 
</span></a></1i> 
<li><a href="" class="b5 2z"><span><img src="a5.jpg" /><br /> 
我 淑女 吧 <br /> 
</span></a></1i> 
<li><a href="" class="b6 z"><span><img src="a6.jpg" /><br /> 
为 什么 天 变 黑 了 <br /> 
</span></a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


上 面 代码 中 创建 了 两 个 层 ， 分 别 为 iInfo 层 和 zs 层 。 其 中 info 是 一 个 布局 容器 ， 里 面 是 其 他 
的 HTML 元 素 ， 例 如 标题 、 图 片 等 。zs 层 主要 存放 超级 链接 ， 即 无 序列 表 等 。 

在 Firefox 5.0 中 ， 浏 览 效果 如 图 15-2 所 示 ， 可 以 看 到 页 面 左 侧 图 片 ， 根 据 无 序列 表 自 上 而 
下 进行 排列 ， 每 张 图 片 下 都 有 说 明文 字 。 


图 15-1 相册 左右 版 式 图 15-2 创建 基本 HTML 页 面 


国 添加 CSS 样 式 ， 对 全 局 修饰 。 


<style> 

bodyt{ 
margin:0; 
padding:0; 
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两 侧 距离 、 对 
和 外 边 距 等 。 


font-size:12px; 
line-height:1.7; 
font-family:Verdana，" 宋 体 "; 
overflow:hidden 
} 
#infof{ 
width:600px; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
border:lpx solid #ddeecc; 
height:450px; 
margin-top:20px; 
上 
#2zs{ 
height:340px; 
overflow: auto; 
float:right; 
width:140px; 
margin-top:20px; 
margin-bottom:50px; 
border:2px solid #ddeecc; 
} 
</style> 


上 面 代 码 中 ， 创 建 了 3 个 ID 选 择 器 ， 其 中 body 用 于 定义 网 页 全 局 样式 ， 例 如 内 外 边 距 、 


文字 大 小 、 行 高 、 字 体 和 隐藏 等 。info 选 择 器 用 


齐 方 式 、 边 框 等 。zs 选 择 器 月 


定义 布 


局 容器 宽度 、 高 度 、 外 边 距 上 左右 


于 定义 无 序列 表 的 高 度 、 宽 度 、 浮 动 布 局 、 边 框 


在 Firefox 5.0 中 ， 浏 览 效果 如 图 15-3 所 示 ， 可 以 看 到 网 页 中 显示 了 一 个 大 的 边框 ， 边 框 中 


加 添加 修饰 样式 ， 修 饰 局 部 样式 。 


h3{ 

margin:30px 0 0 0; 
color:#cc0000; 
font-size:12px; 

} 

spant{ 

visibility:hidden; 

position:absolute; 
overflow:hidden; 

} 

a 
list-style:none; 

margin:0; 
padding:0;} 
a:active,a:hovert{ 


包含 标题 和 图 片 信息 ， 其 中 列表 图 片 在 右 侧 显示 ， 并 在 指定 边框 显示 ， 标 题 居中 显示 。 此 时 
鼠标 放 到 图 片上 ， 没 有 任何 情况 发 生 。 
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cursor:pointer 

} 

a:hover span,a:active span{ 
position:absolute; 

top: 90px; 

z-index:20px; 
Visibility: visible; 
margin-left:-500px; 

’ 

#info img{ 
width:400px; 
height:280px; 
border:7px solid #FFFFFF 

} 

-2{ 
width:80px; 
height:56px; 
display:block; 
border:lpx solid #FFFFFF; 
margin:4px 0 4px 25px; 

} 

.bl{ background:url (bl.jpg)} 
.b2{ background:url (b2.jpg)} 
.b3{ background:url (b3.jpg)} 
.b4{ background:url (b4.jpg)} 
.b5{ background:url (b5.jpg)} 
.b6{ background:ur]l (b6.jpg)} 


上 面 代码 中 ， 创 建 了 几 个 选择 器 ， 其 中 hb3、span、ul、1 和 a:hover 等 修饰 对 应 的 HTML 标 
记 样式 ， 下 面 的 类 选择 器 z 用 于 定义 超级 链接 的 显示 样式 ， 例 如 宽度 、 高 度 、 块 显示 、 边 框 和 
外 边 距 等 。b1 设 定 背 景 图 片 ， 即 鼠标 放 到 第 一 个 无 序列 表 选 项 时 ， 就 会 显示 此 背景 图 片 。b2 
等 以 此 类 推 。 

在 Firefox 5.0 中 ， 浏 览 效 果 如 图 15-4 所 示 ， 可 以 看 到 图 片 在 网 页 左 侧 显 示 ， 右 侧 显 示 了 一 
个 列表 框 。 当 鼠标 放 到 列表 中 的 任 一 图 片上 ， 会 在 网 页 左 侧 显示 该 图 片 。 


加 百 可 


出 


15-3 设置 全 局 样式 图 15-4 最 终 效果 
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15,3 ”综合 实例 2 一 一 个 人 网 站 首页 


为 了 表达 观点 、 抒 发 感情 或 者 宣传 自己 ， 个 人 网 站 是 很 好 的 途径 之 一 。 本 实例 创建 一 个 
个 人 网 站 ， 具 体 步骤 如 下 所 示 。 

分 析 需 求 。 

首先 需要 使 用 div 层 将 页 面 划分 不 同 的 区 域 ， 用 以 构建 网 页 布局 。 并 创建 一 个 DIV 层 作为 
布局 容器 ， 其 他 div 层 分 别 代表 不 同 的 区 域 。 实 例 完成 后 效果 如 图 15-5 所 示 。 

轧 创建 HTML 网 页 ， 使 用 div 层 分 块 。 

在 HTML 页面， 根据 图 15-5 所 示 的 页 面 效 果 ， 总 体 可 以 划分 为 上 中 下 结构 ， 网 页 主体 内 
容 分 为 左 中 右 版 式 。 其 代码 如 下 : 


<html> 

<head> 

<title> 朴 实 的 一 天 </title> 

</head> 

<body> 

<div id="wrapper"> 

<div id="header"> <hl> 李 四 <span class="orange"> 的 网 站 </span></hl> 

</div> 

<div id="navhorisontell"> 

<ul> 

<1i><a href="index.htm"” class="selected"> 博 客 首页 </a> </1i> 

<1i><a href="index.htm"> 关 于 李 四 </a></1i> 

<li><a href="index.htm"> 给 我 留言 </a></1i> 

<1i><a href="index.htm"> 友 情 链 接 </a></1i> 

<1i><a href="index.htm"> 我 的 信箱 </a></1i> 

<1i><a href="index.htm"> 社 区 </a></1i> 

</ul> 

</div> 

<div id="content"> 

<div id="col1"> 

<hl>2011.08.12 晚上 </hl> 

<p> 好 热 啊 ， 早 上 起 来 脑袋 都 昏 沉 ， 直 到 现在 都 是 。 机 器 还 在 响 着 ， 车 间 里 更 热 ， 所 以 我 不 去 开 空 
调 ， 只 希望 自然 风 再 大 些 。 那些 可 爱 的 人 们 在 我 的 眼皮 底下 辛苦 的 干 着 活 ， 又 脏 又 累 ， 我 怎么 忍心 ? ? ? 
把 福子 被 子 都 拿 出 去 呵 了 ， 太 阳 出 来 又 进去 ， 到 底 是 怎么 啦 提 不 起 劲 儿 ? ”这 些 工作 都 做 完 ， 喝 了 一 杯 温 开 
水 ， 汗 流 淡 背 ， 衣 服 湿 透 了 ， 脑 袋 依然 昏 沉 。 宿舍 里 很 压抑 ， 不 知道 是 自己 的 原因 还 是 环境 就 这 样 ? 

</p> 

<P> 当 年 张 爸爸 在 工地 上 ， 没 有 风扇 ， 没 有 空调 ， 只 要 一 把 旧 芭 燕 扇 就 度 过 了 几 个 夏天 ， 何 况 我 晚上 
还 有 一 台电 风扇 ， 比 起 他 的 艰辛 我 这 又 算 什 么 。 张 妈 妈 在 家 里 放 了 关于 佛 的 书籍 还 有 音乐 ， 每 天 重复 着 大 
兹 大悲， 这 些 音乐 听 得 我 特别 感动 ， 一 有 空闲 就 想 听 听 这 样 的 音乐 看 看 这 些 书 。 他 们 本 来 就 是 一 群 超 善良 
的 人 们 ， 过 于 懂得 感恩 是 值得 善待 的 人 们 ， 想 到 他 们 我 就 特 心疼 特 忘情 。 

</p> 

<p> 昨 天 感冒 了 ， 这 种 天 气 下 还 能 感冒 ， 晚 上 吃 了 药 今 天 就 好 了 ， 好 神奇 啊 ， 身 体 不 舒服 一 剂 药 就 可 
以 治愈 ， 如 果 心 不 每 服 了 该 怎么 治疗 ? 也 许 只 是 一 名 问候， 一 声 关 怀 。 可 是 ， 就 是 因为 冷漠 ， 才 让 人 更 自 
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立 的 吧 ! 

</p> 

</div> 

<div id="col2"><img src="Img/bild.jpg" class="imagecol2" alt="bild"></img> 
</div> 

</div> 

<div id="nav"> 

<ul> 

<li><a href="index.htm" class="selected"> 日 志 </a> </1i> 

<1i><a href="index.htm"> 相 册 </a></1i> 

<1i><a href="index.htm"> 个 人 档案 </a></1i> 

<1i><a href="index.htm"> 分 享 </a></1i> 

<1i><a href="index.htm"> 音 乐 地 带 </a></1i> 

<1i><a href="index.htm"> 更 多 </a></1i> 

</ul> 

</div> 

<div id="footer"><p>2011 (网 站 ) 设计 者 <a href=""> 李 四 工作 室 </a> </p></div> 

</div> 

</body> 

</html> 


上 面 代码 中 ，wrapper 层 用 做 布局 容器 ， 放 置 其 他 div 层 。header 层 显示 网 页 Logo， 
navhorisontell 层 显示 页 头 部 分 的 导航 菜单 ，header 层 和 navhorisontell 层 共同 组 合成 页 头 部 分 。coll 
层 作为 页 面 主体 的 中 间 部 分 ， 显 示 段 落 信息 ; col2 是 页 面 主体 的 右 侧 部 分 ， 显 示 了 一 张 图 片 ; 
nav 是 页 面 主体 中 的 左 侧 部 分 ， 显 示 的 是 导航 链接 。footer 用 于 页 脚 部 分 ， 存 放 版 权 和 地 址 信息 。 
content 层 是 层 coll 和 层 col2 的 父 层 ，<link> 标 记 表示 当前 HTML 页 面 引 入 了 一 个 CSS 文 件 。 

在 IE9.0 中 ， 浏 览 效果 如 图 15-6 所 示 ， 可 以 看 到 页 面 中 显示 列表 显示 、 段 落 信 息 和 图 片 ， 
其 显示 顺序 依据 HTML 网 页 的 DIV 排列 顺序 。 


到 
a 
人 


RT 
7 信众 是 一同 恨 一 天 件 本 二 让， 千 让 人 更 


4 
Rat! 


出 


15-5 个 人 网 站 首页 图 15-6 基本 HTML 页 面 显 示 


园 添加 CSS 代 码 ， 修 饰 全 局 样式 。 


*{margin:0px;padding:0px}/* 布局 */ 
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body 

{ 

background:url (Img/bodybg.jpg) repeat-x top center #eceddd; 
font-family:Arial, Verdana,'Lucida Grande', Helvetica, sans-serif; 
text-align: center; 

color: #333333; 

} 


#wrapper 

{ 

background-color:#fff; 
margin-top: 20px; 
margin-right: auto; 
margin-bottom: Opx; 
margin-left: auto; 
width:902px; 

border:10pPx solid #ffffff; 
k 


上 面 代 码 定义 了 * 全 局 选择 器 ，body 标 记 选 择 器 和 ID 选择 器 wrapper。 在 body 标 记 选 择 器 
中 ， 定 义 了 背景 图 片 、 字 体 、 对 齐 方式 和 字体 颜色 等 。ID 选 择 器 wrapper 中 定义 了 背景 色 、 外 
边 距 、 宽 度 和 边框 样式 等 。 

在 IE9.0 中 ， 浏 览 效 果 如 图 15-7 所 示 ， 可 以 看 到 列表 、 段 落 信息 和 图 片 等 都 居中 显示 ， 网 
页 上 、 左 、 右 三 侧 都 有 边框 显示 。 

添加 CSS 代 码 ， 修 饰 页 头 部 分 。 


#header 

{ 

background:url (Img/bgheader.jpg) no-repeat; 
width:902px; 

height:203px; 

padding-top: Opx; 

margin-left:0px; 

margin-right:0px; 

margin-top: Opx; 

margin-bottom: Opx; 

} 

#header hl 

i 

float:left; 

font-size:2.9em; 

padding-top:60px; 

padding-left:37px; 
font-family:Arial,verdana, sans-serif; 
Color:#37210c; 

font-weight:bolder; 


letter-spacing:-1px; 
} 

-orange 
{color:#e67elf;} 
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#navhorisontell 

i 

float:left; 

list-style:none; 
margin-bottom: Opx; 
margin-top:0px; 
margin-left:0px; 
width:902px; 
background-color: #37210c; 

} 

#navhorisontell ul 

下 

list-style:none; 
margin-bottom: Opx; 
margin-top:0px; 
margin-left:0px; 

} 

#navhorisontell 1i 

| 

text-align:left; 

float:left; 

padding-left:0px; 
padding-top:0px; 
padding-bottom: Opx; 

} 

#navhorisontell ul li a 
display:block; 
background-color:#37210c; 
border-right:lpx solid #fff; 
line-height:2.5em; 
margin-right:0px; 
padding:8px 14px 8px 14px; 
Color: #ecf9ff; 
font-weight:normal; 
font-size: 0.8em; 
text-decoration: none; 
#navhorisontell 1i a:hover 
A 
color: #ecf9ff; 
background-color:#543e29; 


{ 
color: #ecf9ff; 
background-color:#e67elf; 


上 面 代码 主 


度 和 外 边 距 等 。 了 有 DD 选择 器 navhorisontell 定 义 


#navhorisontell ul li .selected 


要 修饰 网 页 的 页 头 部 分 ， 其 中 
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hID 选 择 器 header 定 义 页 头 背 景 图 


片 ， 宽 度 、 高 


层 宽度 、 列 表 显 示 样 式 、 


层 浮 动 显示 和 外 边 距 距 


347 


人 、m 通 DIV+CSS3 网 页 布局 与 样式 


离 。 其 他 选择 器 都 是 在 这 两 个 选择 器 的 基础 上 ， 对 层 中 的 每 个 具体 标记 进行 修饰 ， 例 如 定义 
hl 样式 。 


< 


在 IE9.0 中 ， 浏 览 效 果 如 图 15-8 所 示 ， 可 以 看 到 页 面 项 商 
导航 菜单 ， 当 鼠标 放 到 菜单 上 ， 背 景色 会 显示 为 灰色 村 


[Eons 


末 间 是 更 二 其 以 人 下去 开 宙 只 天 名 名 丙 大 只， 下 
TT Ms 


由 了 ， 地 和 天 习 下 红岗 呈 央 、 区 上 由 了 机 天 这 了 ， 地 1 TT 


全 -由 虹 ， 记 : 


图 15-7 定义 全 局 样式 


好 添加 CSS 代 码 ， 修 饰 页 面 主体 左 侧 痛 


了 分 。 


#nav 

{ 

float:left; 
list-style:none; 
margin-top:15px; 
margin-left:0px; 
height:50%; 

} 

#nav ul 

{ 

list-style:none; 
margin-bottom:20px; 
margin-top:20px; 
margin-left:0px; 

} 

#nav 1i 

上 

text-align:left; 
padding-left:0px; 
padding-top:0px; 
padding-bottom: Opx; 
border-bottom:lpx solid #eaeada; 
} 

#nav ul li a 


{ 


background-image: urll(Img/bullet.gif); 


f 式 。 


?显示 了 一 张 背景 图 片 ， 并 显示 了 


2011.08.12 晚上 
习 
浊 
A 
天， 休 区 上 下 二 愉 用， 二 直人 的 四 
PD 
i 
0 有 LT 前 朋 了 请 和 


图 15-8 定义 页 头 部 分 
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background-repeat:no-repeat; 
background-position:left center; 
display:block; 
background-color:#ffffff; 
line-height:1.7em; 
margin-right:0px; 
padding-top:6px; 
padding-bottom: 6px; 
padding-left:22px; 

color: #666666; 
font-weight:normal; 
font-size: 0.8em; 
text-decoration: none; 
width:165px; 

} 

#nav 1i a:hover 

{ 

color: #37210c7 
background-color:#f7f7f2; 


} 

#nav .selected 

{ 

color: #37210c; 
background-color:#f7f7f2; 
} 


在 上 面 代码 中 ，ID 选 择 器 nav 定 义 页 面 主体 左 侧 部 分 ， 例 如 定义 层 浮动 布局 ， 列 表 显 示 
无 特殊 符号 ， 上 侧 和 左 侧 外 边 距 距 离 ， 其 层 高 占 父 div 层 50%。 下 面 依据 选择 器 hav， 分 别 定 
义 了 无 序列 表 显示 样式 ， 列 表 选 项 样式 、 超 级 链接 显示 样式 、 鼠 标 悬 浮 显示 样式 等 。 

在 IE9.0 中 ， 浏 览 效果 如 图 15-9 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 导航 菜单 ， 其 菜单 前 
面 都 带 有 箭头 标识 。 

四 添加 CSS 代 码 ， 修 饰 页 面 主体 中 间 部 分 。 


#content 

{ 

float:right; 
background-color:#ffffff; 
width:710px; 
margin-top:20px; 
margin:auto; 
padding:0px; 
margin-bottom: 30px; 
margin-right:0px; 

} 

#coll 

{ 

float:left; 
width:410px; 
margin-right:0px; 


margin-top:20px; 
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background-color:inherit; 
text-align:left; 
font-size:0.9em; 
padding:S5px; 

} 

#coll hl 

上‘ 

display:block; 
font-size:0.9em; 
width:50px; 
font-family: arial; 
text-align:left; 
font-weight:bold; 
color:#403f3b; 
font-family:arial; 
font-weight:bold; 
padding:S5px; 
margin-top:Spx; 
margin-left:12px; 

} 

#coll p 

font: normal 0.9em Arial, 
font-size:0.9em; 
color: #000000; 
padding:10px; 
text-align:left; 

二 


在 上 


Verdanay 


日 


对 齐 方式 依据 内 外 边 距 等 。 下 面 选择 器 分 别 定义 了 coll 
在 IE9.0 中 ， 浏 览 效果 如 图 
示 了 段落 信息 ， 右 侧 显 示 的 是 一 张 图 


片 信息 。 


IT 这 人 天 和 全 上 区 天光 i im 
他 许 及 是 一 向 同 候 ， 一 声 关 全 ”可 是 ， 认 因为 罕 广 ， 才 让 人 面 昌 立 


Rattl 


2011 CA) 者 于 工作 


图 15-9 定义 页 面 主体 左 侧 部 分 


Helvetica, 


15-10 所 示 ， 可 以 看 到 页 面 主体 左 侧 显示 了 导航 菜单 ， 


sans-serif; 


代码 中 ，ID 选 择 器 content 中 定义 了 层 在 右边 浮动 显示 ， 层 宽度 为 710px 以 及 背景 
色 ， 外 边 距 距离 等 。 在 ID 选择 器 coll 中 定义 了 层 在 左边 浮动 显示 ， 宽 度 为 410px， 字 体 大 小 、 


层 中 的 标题 和 段落 信息 。 
中 间 显 


图 15-10 定义 页 面 主体 中 间 样 式 
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添加 CSS 代 码 ， 修 饰 页 面 主体 右 便 部分。 


#col2 
上 
float:right; 
background-color:#ffffff; 
width:272px; 
margin-top:20px; 
padding:8px 0 8px 8px; 
text-align:left; 
font-size:0.9em; 

} 
#co1l2 p 

t 


font: bold 0.9em Arial, Verdana, Helvetica, sans-serif; 


font-size:0.8em; 
color: #000000; 
padding:10px; 
text-align:left; 
} 

#co12 .imagecol2 
{ 
padding-left:0px; 
padding-top:0px; 
border:none; 


上 面 代 码 中 ，ID 选 择 器 col2 定 义 层 在 右边 浮动 显示 ， 宽 度 为 272px， 字 体 大 小 、 对 齐 方 


式 、 背 景色 和 内 外 边 距 等 。 下 面 选 择 器 定义 了 col2 层 中 的 段落 和 
图 片 进行 修饰 ， 图 片 样式 变化 不 大 ， 这 里 就 不 再 显示 了 。 
国 添加 CSS 代 码 ， 修 饰 页 脚 部 分 。 


#footer 

上 

width:902px; 
height: 85px; 
clear:both; 
margin-top: Opx; 
background-color:#dfeef9; 
Color:#666666;; 
margin-left:auto; 
margin-right:auto; 
margin-bottom: Opx; 
padding-top: l15px; 
padding-right: Opx; 


padding-bottom: Opx; 
padding-left: Opx; 

} 

#footer p 

{ 


font-size:0.7em; 


图 片 样式 。 


于 本 样式 是 对 
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并 使 
进行 


font-family:arial; 
font-weight:normal; 
line-height: 1.4em; 
color:#555555; 
padding:25px 0 0 10px7 
text-align:center; 

} 

#footer a 

{ 

font-size:lem; 
text-decration:none; 
font-weight:normal; 
Color:#467AA7; 
text-align:center; 

} 

#footer a:hover 


{ 


text-decoration:underline; 


font-weight:normal; 
Color:#467AA7; 
text-align:center; 


} 


上 面 代码 中 ， 了 有 DD 选择 器 footer 中 ， 定 义 了 层 宽度 、 高 度 、 背 景色 、 字 体 颜色 和 内 外 边 距 ， 
用 clear 属 性 去 掉 float 属 性 对 本 层 的 影响 。 下 面 选择 器 对 footer 层 中 的 段落 和 超级 链接 样式 
了 定义 。 

在 IE9.0 中 ， 浏 览 效果 如 图 15-5$ 所 示 ， 可 以 看 到 页 面 底部 显示 了 一 个 背景 色 为 青 蓝 色 的 和 矩 


纷 妹 


形 ， 中 间 位 置 显示 了 版 权 信息 。 
一 
15.4 综 
人 们 生活 富裕 之 后 ， 就 纷 
站 ， 就 应 运 而 生 ， 用 于 介绍 
所 示 。 


版 式 。 


分 析 需 求 。 
作为 旅游 景点 介绍 的 网 站 ， 


和 宣传 旅游 特色 。 本 实 侦 


加 创建 HTML 页 面 ， 使 


除了 正常 的 页 面 导 航 之 
如 筹 火 晚会 、 看 日 出 这 些 。 实 例 完成 后 ， 页 面 效 果 如 
DIV 分 


山 完 
山 


HH 


模拟 


块 。 


根据 上 面 


效果 可 以 看 出 ， 页 


日 


划分 垂直 方向 上 分 为 上 


其 区 域 都 


以 通过 div 


层 来 布 


局 ， 代 码 如 下 : 


h 下 三 


综合 实例 3 一 一 旅游 网 站 首页 


家 门 ， 开 始 去 外 地 观光 旅游 。 这 时 各 大 旅游 景点 的 网 
一 个 旅游 网 站 首页 ， 具 体 步 骤 如 下 


外 ， 还 需要 将 旅游 特色 介绍 出 来 ， 例 
图 15-11 所 示 。 


层 结构 ， 网 页 主体 分 为 左右 
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<html] > 
<head> 
<title> 夏 季 之 花 </title> 
<link href="stylel.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id=all> 
<div id=header> 
<hl class="website-title"> 夏 季 之 花 </h1> 
</div> 
<div> 
<p class=menu> 
<a class="menu-link"” href="index.html"> 收 费 </a> <a class="menu-link" 
href="index.html"> 风 景 </a> <a class="menu-link"” href="index.html"> 人 文 </a> <a 
class="menu-link" href="index.html"> 礼 物 </a> <a class="menu-link" href="index. 
htm1l"> 联 系 我 们 </a> 
</p> 
</div> 
<div id=content> 
<div id=left> 
<h1> 使 用 条 款 </h1> 
<p> 你 可 以 任意 使 用 这 个 模板 ， 而 没有 版 权 的 限制 。</p> 
<h1> 夏 季 </h1> 
<p> 夏 季 是 四 季 之 一 。 在 大 多 数 地 区 夏季 是 气候 炎热 、 有 可 能 缺 水 的 季节 ， 此 外 ， 由 于 
夏季 时 全 球 大 部 分 学 生 都 放 暑 假 ， 因 此 也 是 相当 旺盛 的 旅游 季节 。 
GLE? GOL </p> 
<p><em> 在 中 国 夏季 从 立夏 (5 月 5 日 至 7 日 之 间 ) 开始 ， 到 立秋 结束 ， 西 方 人 则 普遍 称 
夏至 至 秋分 为 夏季 。 在 南半球 ， 一 般 12 月 、1 月 和 2 月 被 定 为 夏季 。 从 气候 学 意义 上 讲 : 连续 五 天 平均 温度 
超过 22'C 算 作 夏 季 ， 直 到 五 天 平均 温度 低 于 22 尼 算 作 秋季 。</em></p> 
</div> 
<div id=right> 
<p class="content-right"> 
<a class="menu-right" href="#"> 夏 天 的 太阳 </a> 
<a class="menu-right™" href="#"> 彩 虹 </a> 
<a class="menu-right" href="#"> 水 </a> 
<a class="menu-right"” href="#"> 海 边 沙 滩 </a> 
<a class="menu-right" href="#"> 筹 火 </a> 
</p> 
</div> 
</div> 
<div id=footer> 
<span class="made-in text"> 设 计 者 <a class="made-in" title="" href=""> 李 四 工 
作 室 </a></span> 
</div> 
</div> 
</body> 
</html> 


上 面 HIML 代 码 中 ， 创 建 了 all 层 作为 布局 容器 ， 用 来 存放 其 他 的 div 层 。header 层 放置 了 
页 面 Logo，menu 层 作为 页 面 导 航 菜单 ，header 层 和 menu 层 共同 组 成 页 头 部 分 。content 层 是 页 
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面 主体 部 分 ， 包 含 了 两 个 子 层 ，left 层 和 right 层 。left 层 表示 页 面 主体 左 侧 部 分 ，right 层 表示 页 
面 主体 右 侧 部 分 。footer 层 表示 页 脚 部 分 。 


“<link hre 舍 "stylel.css" rel="stylesheet" type="text/ 


css" />” 语 句 表示 将 stylel.css 样 式 文件 引入 到 当前 HTML 文 件 中 。 


在 IE9.0 中 ， 浏 览 效果 如 图 15-12 所 示 ， 可 以 看 到 网 页 自 上 而 下 显示 了 标题 、 超 级 链接 和 
文本 信息 等 ， 其 中 普通 文字 颜色 为 黑色 ， 超 级 链接 为 蓝 色 。 


15-11 旅游 网 站 首页 


凤 】 添加 CSS 样 式 ， 定 义 全 局 样式 。 


a 
padding:0px; 
margin:0px; 
. 

body { 


background-image:url (i/bg.gif); 


margin:0px; 
padding-top:15px; 
font-family: sans-serif; 
font-size:13px; 
Color:#222222; 
text-align:center; 
} 
#allf{ 
width:960px; 


margin:0px auto Opx auto; 


background:white; 


} 


上 面 代 码 中 ，body 标 记 选 择 器 定义 
了 背景 图 片 、 内 外 边 距 以 及 文字 大 小 、 
字体 颜色 和 对 齐 方式 等 。ID 选 择 器 all 


中 定义 了 层 宽度 为 060px， 背 景色 为 
色 ， 外 边 距 均 为 0。 


在 IE9.0 中 ， 浏 览 效果 如 图 15-13 所 


示 ， 可 以 看 到 页 面 加 载 了 一 个 背景 
片 ， 并 且 HTML 元 素 都 在 白色 背景 下 
中 显示 。 


自 


图 
下 居 


[< BO 
夏季 之 花 

| sais me 和 i BE 2 
夏季 


A 


PAC ott er et pee eg tReet 
I 


3 Bi 要 
有 


网 


15-12 基本 HTML 样 式 


图 15-13 定义 全 局 样式 
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加 添加 CSS 样 式 ， 定 义 页 头 样式 。 
#headert{ 
width:960px; 
background-image: url(i/top-bg.jpg); 
height:250px; 
} 
-Website-title { 
position:relative; 
left:0px;top:30px; 
font-family: “ 幼 圆 ”; 
Color: #FFFFFF; 
text-align:center; 
font-size:34px; 
letter-spacing:-1lpx;} 
-menu { 
height:35px; 
background-image:url (i/menu-bg.gif); 
position:relative; 
width:960px; 
text-align:left; 
} 
a.menu-link { 
background-image:url (i/menu-sep.gif); 
height:30px; 
line-height:30px; 
background-position: right; 
background-repeat:no-repeat; 
padding-left:7px; 
padding-right:14px; 
padding-top:6px; 
padding-bottom: 6px; 
font-family: tahoma; 
font-size:15px; 
Color:#FFFFFF; 
text-decoration:none; 
font-weight:bold} 
a.menu-link:hover { 
background-image:url (i/menu-bg hover.gif); 
background-position:center; 
background-repeat:repeat-x; 
Color:#FFE7CE;} 


在 上 面 代 码 中 ，ID 选 择 器 header 中 ， 定 义 了 层 宽度 、 背 景 图 片 和 高 度 。 类 选择 器 menu 定 
义 了 背景 图 片 、 高 度 、 宽 度 和 对 齐 方式 。 类 website-title 定 义 了 页 头 部 分 文字 显示 样式 ， 例 如 
字体 大 小 、 字 符 间距 、 颜 色 、 字 体 、 定 位 方式 和 左边 位 置 。 类 menu-link 选 择 器 中 定义 超级 链 
接 的 背景 图 片 、 内 外 边 距 、 是 否 带 有 下 划 线 等 。 

在 IE9.0 中 ， 浏 览 效 果 如 图 15-14 所 示 ， 可 以 看 到 页 头 部 分 ， 显 示 了 背景 图 片 和 导航 菜 
单 。 其 中 背景 图 片 显示 了 文本 信息 “夏季 之 花 ”， 导 航 菜单 以 黄色 背景 色 显 示 。 
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图 15-14 定义 页 头 样式 


辆 添加 CSS 样 式 ， 定 义 页 面 主体 样式 。 


#1left{ 


float:left; 
width:758px; 
text-align:left; 
} 
#1left pt{ 
font-size:16px; 
line-height:30px; 
font-family: "宋体 "; 
下 
#right{ 
float:right; 
width:198px; 
} 
a.menu-right, a.menu-right:visited { 
font-size: 18px; 
line-height:30px; 
padding-left:20px; 
text-decoration:none; 
color:#aaaaaa; 
background-color:#FAFAFA; 
width:178px; 
display:block; 
border-bottom:#CCCCCC 
solid lpx} 
a.menu-right:hover { 
background-color:#2679B7; 
color:#D8E9F1} 


上 面 代码 中 ，left 选 择 器 定义 了 层 浮 动 在 左 侧 显示 ， 宽 度 为 738px， 对 齐 方式 为 左 对 齐 ; 


在 IE9.0 中 ， 浏 览 效果 如 图 15-15 所 示 ， 可 以 看 到 页 面 主体 显示 了 两 个 区 域 ; 


落 信息 ， 一 个 显示 列表 信息 。 其 中 列表 信息 背景 


色 。 


right 选 择 器 定义 了 层 浮 动 在 右 侧 显 示 ， 宽 度 为 198px。 其 他 选择 器 分 别 定义 了 段落 显示 样式 和 
超级 链接 显示 样式 。 


个 显示 段 
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四 添加 CSS 样 式 ， 定 义 页 脚 样式 。 
#footer{ 
clear:both; 
text-align:left; 
上 
a.made-in {color:#aaaaaa;} 
-made-in text { 
Eont— Size: 115XX 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #aaaaaa; 
padding-left:3px; 
padding-bottom:15px; 


E 


在 上 面 代 码 中 ，footer 选 
择 器 定义 了 对 齐 方式 ， 并 使 
clear 消 除 上 面 层 使 用 float 带 来 
的 影响 。 下 面 选择 器 定义 了 页 
脚 部 分 超级 链接 显示 样式 。 

在 IE9.0 中 ， 浏 览 效果 如 图 
15-11 所 示 ， 可 以 看 到 页 脚 部 分 


在 大 多 艇 地 由 符 是 乞 俱 失 的 、 有 可 能 统 汪 的 村 他 此外， 由 于 丰 季 时 全 于 大 时 从 学生 导 


以 白色 字体 显示 ， 并 处 在 页 面 fem, tem mi 


Pp Fip apax BAR8aREEER4H8F SN 
> - 
下 角 人 一 za， TAR 打败 本 全 有 字 相 灾 上 理 ， 放下 2422 扩 内 从 村 天 人 五 到 
左下 角 位 置 。 sar sn ey 


图 15-15 定义 页 面 主体 样式 


1. 在 CSS3 中 ， 如 果 使 用 font-size:small 语 句 设 置 字体 ， 会 发 现 字 体 大 小 在 各 个 浏览 器 不 


同 ， 这 是 为 什么 ? 


这 是 因为 不 同 浏览 器 对 字体 大 小 small 有 不 同 的 定义 造成 的 ，Firefox 浏 览 器 将 small 定 义 为 


13px， 下 浏览 器 定义 为 16px， 所 以 就 导致 了 字体 在 不 同 浏览 器 中 显示 的 大 小 不 同 。 


其 解决 办 法 是 在 页 面 中 设置 字体 大 小 的 时 候 ， 不 使 用 small 设 置 大 小 ， 直 接 使 


有 15px 等 具 


体 的 数值 ， 这 样 ， 不 管 在 何 种 浏览 器 中 ， 都 会 以 相同 的 大 小 显示 ， 而 不 会 出 现 差异 。 


2. 在 Firefox 中 设置 鼠标 样式 ， 其 属性 值 为 hand， 为 什么 不 可 以 ? 


这 是 因为 hand 属 性 值 仅 在 IE 中 可 以 使 用 ， 如 果 要 设置 兼容 的 手 状 ， 需 要 使 用 cursor: 


pointer 语 句 ，pointer 属 性 值 可 以 实现 在 正和 Firefox 中 显示 游标 手 状 。 


357 


_ CSS3 与 JavaScript 
“的 搭配 应 用 


本 章 引言 


网 页 吸引 人 之 处 ， 莫 过 于 具有 动态 效果 ， 利 用 CSS 伪 类 元 素 
可 以 轻易 实现 超级 链接 的 动态 效果 。 不 过 利用 CSS 能 实现 的 动态 
效果 非常 有 限 。 在 网 页 设计 中 ， 还 可 以 将 CSS 与 JavaScript 结 合 
创建 出 具有 动态 效果 的 页 面 。 


第 16 章 “CSS3 与 JavaScript 的 搭配 应 用 


16.1 JavaScript 概 述 


JavaScript 是 一 种 面向 对 象 、 结 构 化 、 多 用 途 的 语言 ， 它 支持 Web 应 用 程序 的 客户 端 和 服 
务 器 方面 构件 的 开发 。 在 客户 端 ， 利 用 JavaScript 脚 本 语言 ， 可 以 设计 出 多 种 网 页 特效 ， 从 而 
提高 网 页 浏览 量 。 


人 SEE JavaScript 概 念 


JavaScript 是 一 种 脚本 编写 语言 ， 它 采用 小 程序 段 的 方式 实现 编程 ， 像 其 他 脚本 语言 一 
样 ，JavaScript 同 样 也 是 一 种 解释 性 语言 ， 它 提供 了 一 个 简易 的 开发 过 程 。JavaScript 是 一 种 基 
于 对 象 的 语言 ， 同 时 也 可 以 看 作 是 一 种 面向 对 象 的 语言 。 这 意味 着 它 具 有 定义 和 使 用 对 象 的 
能 力 。 因 此 ， 许 多 功能 可 以 由 脚本 环境 中 对 象 的 方法 与 脚本 之 间 进 行 相互 写作 来 实现 。 

JavaScript 是 动态 的 ， 它 可 以 直接 对 用 户 或 客户 输入 的 数据 做 出 及 时 响应 ， 无 须 经 过 Web 
服务 程序 。 它 对 用 户 请 求 的 响应 是 以 事件 驱动 的 方式 进行 的 。 所 谓 事 件 驱动 ， 就 是 指 在 主页 
中 执行 某 种 操作 时 所 产生 的 动作 ， 也 称 为 “事件 ”。 例 如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 
都 可 以 视 为 事件 。 当 事件 被 触发 时 ， 可 能 会 引起 相应 的 事件 响应 处 理 。 

JavaScript 具 有 下 面 几 个 特点 : 

(1) 一 种 描述 语言 ， 通 过 浏览 器 就 可 以 直接 执行 。 

(2) 必须 编写 在 HTML 文件 中 ， 直 接 查 看 网 页 的 源码 ， 就 可 以 看 到 JavaScript 程 序 ， 所 以 没 
有 保护 ， 任 何人 都 可 以 通过 HTMI 文 件 复制 代码 。 

(3) 结构 较为 自由 松散 ， 例 如 程序 中 使 用 变量 前 ， 并 不 需要 明确 定义 ， 但 对 大 小 写 敏感。 

(4) 不 具有 读 写 文件 及 网 络 控制 等 功能 。 


人 LEE JavaScript 引 用 
在 HTMIL 文 档 中 使 用 JavaScript 有 两 种 方式 ， 一 种 是 使 用 <scrip 亿 标记 将 语句 嵌入 文档 ， 另 
一 种 是 将 JavaScript 做 成 独立 的 文件 ， 引 入 到 HTML 文 档 中 。 
1. 骨 入 JavaScript 代 码 


如 果 在 HIML 文 件 中 嵌入 JavaScript 代 码 ， 需 要 在 <head> 标 记 中 间 嵌 入 一 个 <scrip 忆 标记 ， 
如 下 所 示 。 


<script language="Javascript"> 脚 本 程序 </script> 


此 代码 语句 表示 在 HTML 文 档 里 柑 入 了 一 段 脚本 程序 ， 脚 本 语言 为 JavaScript。 中 间 放 置 
的 是 脚本 程序 。 


依 、 通 DIV+CSS3 网 页 布局 与 样式 


【 例 16.1】 实 例文 件 : ch16\16.1.html 


<html> 
<head> 
<script language = "JavaSscript"> 
document .write ("欢迎 来 到 Javascript 动 态 世 界 ") 7 
</script> 
</head> 
<body> 
<p> 学 习 Javascript! ! ! 
</body> 
</html> 


该 实例 功能 是 在 HTML 文 档 里 输出 一 个 字符 串 ， 即 “欢迎 来 到 JavaScript 动 态 世 界 ”。 
在 IE9.0 中 ， 浏 览 效 果 如 图 16-1 所 示 ， 可 以 看 到 网 页 输出 了 两 句 话 ， 其 中 第 一 句 就 是 
JavaScript 中 的 输出 语句 。 


BO sos pox]B ornenisr. » 区 区 芭 
区 和 玉 Javaseript 动 太 世 办 | 


学 习 JavaSeriptl | 上 


图 16-1 嵌入 JavaScript 代 码 图 16-2 导入 JavaScript 文 件 
在 JavaScript 的 语法 中 ， 分 号 “;” 是 JavaScript 程 序 作为 一 个 语句 结束 的 标识 符 。 


2. 导入 JavaScript 文 件 


如 果 要 导入 JavaScript 文 件 ， 需 要 将 JavaScript 做 成 一 个 独立 文件 ， 然 后 使 用 <script> 标 记 
将 其 引入 到 HTML 文 件 中 。 其 引入 格式 如 下 : 


<script src = "hm 19.js"></script> 
【 例 16.2】 实 例文 件 : ch16\16.2.html 


<html> 

<head> 

<title> 使 用 外 部 文件 </title> 

<script src = "hello.js"></script> 
</head> 

<body> 

<P> 此 处 引用 了 一 个 Javascript 文件 
</body> 

</html> 


在 IE9.0 中 ， 浏 览 效果 如 图 16-2 所 示 ， 可 以 看 到 网 页 首先 弹出 一 个 对 话 框 ， 显 示 提 示 信 
息 。 单 击 【 确 定 】 按 钮 后 ， 会 显示 网 页 内 容 。 


(16.1.3 | JavasScript 与 CSS 


JavaScript 和 CSS 都 有 一 个 共同 的 特点 ， 就 是 二 者 都 是 在 浏览 器 上 解析 并 运行 的 。CSS 用 
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于 设置 网 页 上 的 样式 和 布局 ， 从 而 增加 网 页 特效 ， 而 JavaScript 是 一 种 脚本 语言 ， 可 以 直接 在 
网 页 上 被 浏览 器 解释 运行 。 如 果 将 JavaScript 的 程序 和 CSS 的 静态 效果 结合 起 来 ， 可 以 创建 出 
大 量 的 动态 特效 ， 即 使 用 JavaScript 的 循环 、 分 支 语句 来 控制 CSS 样 式 的 不 断 转换 。 

对 于 动态 特效 ， 实 际 上 在 前 面 CSS 已 经 有 了 实现 ， 例 如 当 鼠 标 停留 在 表格 中 某 一 行 时 ， 
会 显示 一 种 颜色 ， 不 停留 时 会 显示 另外 一 种 颜色 。 同 样 ， 对 于 其 他 的 HTML 元 素 ， 可 以 用 
JavaScript 动 态 判断 ， 从 而 调用 不 同 的 CSS 样 式 。 

JavaScript 和 CSS 的 结合 运用 ， 是 喜爱 网 页 特效 浏览 者 的 一 大 喜讯 。 作 为 一 个 网 页 设计 
者 ， 通 过 对 JavaScript 和 CSS 的 学 习 ， 可 以 创作 出 大 量 的 网 页 特效 。 


办 


16.2 JavaScript 语 法 基础 


JavaScript 是 一 种 脚本 语言 ， 并 具有 自己 的 数据 类 型 、 变 量 标识 符 、 运 算 符 和 流程 控制 。 
但 它 是 一 种 弱 类 型 语言 ， 非 常 容易 学 习 和 掌握 。 


类 型 


在 JavaScript 中 有 4 种 基本 的 数据 类 型 : 数值 (整数 和 实数 ) 、 字 符 串 型 (用 “” 号 或 
“” 插 起 来 的 字符 或 数值 》、 布 尔 型 (使 用 true 或 false 表 示 )〉 和 空 值 。 此 外 ，JavaScript 还 定 
义 了 其 他 复合 数据 类 型 ， 例 如 Date 对 象 是 一 个 日 期 和 时 间 类 型 。 

JavaScript 具 有 的 数据 类 型 ， 如 表 16-1 所 示 。 


表 16-1 JavaScript 的 基本 数据 类 型 


数据 类 型 数据 类 型 名 称 示例 
number 数值 类 型 123、071 (十 进 制 ) 、0X1fa 〈 十 六 进 制 ) 
string 字符 串 类 型 "Hello'、'get the &'、bQ@911.com'、"Hello" 
object 对 象 类 型 Date、Window、Document、Function 
boolean 布尔 类 型 true 和 false 
null 空 类 型 null 
undefined 未 定义 类 型 没有 被 赋 值 的 变量 所 具有 的 “ 值 ” 

1. 数值 型 


JavaScript 的 数值 类 型 可 以 分 为 4 类 ， 即 整数 、 浮 点 数 、 内 部 常量 和 特殊 值 。 

整数 可 以 为 正 数 、0 或 者 负数 ; 浮 点 数 可 以 包含 小 数 点 、 也 可 以 包含 一 个 “e”《【〔 大 小 
写 均 可 ， 在 科学 记 数 法 中 表示 “10 的 早 ”) 、 或 者 同时 包含 这 两 项 。 整 数 可 以 以 10 (十 进 
制 ) 、8 (八进制 ) 和 16《〈 十 六 进 制 ) 作为 基数 来 表示 。 

内 部 常量 和 特殊 值 一 般 不 常用 ， 在 这 里 就 不 再 详细 介绍 。 
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2. 字符 串 

字符 串 是 由 一 对 单 引 号 ('') 或 双 引 号 (" ") 和 引号 中 的 部 分 构成 的 。 一 个 字符 串 也 是 
JavaScript 中 的 一 个 对 象 ， 有 专门 的 属性 。 

引号 中 间 的 部 分 可 以 是 任意 多 的 字符 ， 如 果 没有 ， 则 是 一 个 空 字符 串 。 如 果 要 在 字符 串 
中 使 用 双 引 号 ， 则 应 该 将 其 包含 在 使 用 单 引号 的 字符 串 中 ， 使 用 单 引 号 时 则 反之 。 
3. 布尔 型 


布尔 类 型 boolean 表 示 一 个 逻辑 数值 ， 用 于 表示 两 种 可 能 的 情况 。 逻 辑 真 ， 用 true 表 示 ; 
逻辑 假 ， 用 false 来 表示 。 通 常 ， 我 们 使 用 1 表示 真 ，0 表 示 假 。 


4. undefined 


未 定义 数据 类 型 undefined 表 示 变 量 被 创建 后 ， 该 变量 未 被 赋 过 值 ， 那 么 此 时 变量 的 
值 就 是 未 定义 数据 类 型 。 对 于 数字 ， 未 定义 数值 表示 NaN; 对 于 字符 串 ， 未 定义 数值 表示 
undefined; 对 于 逻辑 数值 ， 未 定义 数值 表示 为 假 。 


5. null 


在 JavaScript 里 ， 使 用 null 声 明 的 变量 并 不 是 9。null 是 一 个 特殊 的 类 型 ， 它 表示 一 个 空 
值 ， 即 没有 值 ， 而 不 是 0，0 是 有 值 的 。 
于 JavaScript 采 用 弱 类 型 的 形式 ， 因 而 一 个 数据 的 变量 或 常量 不 必 首 先 做 声明 ， 而 是 在 
使 用 或 赋值 时 确定 其 数据 类 型 。 当 然 也 可 以 先 声明 该 数据 类 型 ， 它 是 通过 在 赋值 时 自动 说 明 
其 数据 类 型 的 。 


变量 


在 JavaScript 中 ， 使 用 var 关 键 字 来 声明 变量 。 语 法 格式 如 下 : 


JavaScript 是 一 种 区 分 大 小 写 的 语言 ， 因 此 变量 temp 和 变量 Temp 代 表 不 同 的 含义 。 另 外 ， 
在 命名 变量 时 必须 遵循 以 下 规则 : 


。 变量 名 由 字母 、 数 字 、 下 划 线 和 美元 符 组 成 。 

。 ”变量 名 必须 以 字母 、 下 划 线 〈_) 或 美元 符 〈$) 开始 。 

。 变量 名 不 能 是 保留 字 。 

JavaScript 语 言 使 用 等 号 (=) 给 变量 赋值 ， 等 号 左边 是 变量 ， 等 号 右边 是 数值 。 对 变量 
赋值 的 语法 如 下 : 

变量 = 值 ; 

JavaScript 里 的 变量 分 为 全 局 变量 和 局 部 变量 两 种 。 其 中 局 部 变量 就 是 在 函数 里 定义 的 变 
量 ， 在 这 个 函数 里 定义 的 变量 仅 在 该 函数 中 有 效 。 如 果 不 写 var， 直 接 对 变量 进行 赋值 ， 那 么 
JavaScript 将 自动 把 这 个 变量 声明 为 全 局 变量 。 

使 用 示例 如 下 : 
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var yourAppleNumber = 100 
// 等 价 于 

var yourAppleNumber 
yourAppleNumber = 100 


人 现形 运算 符 

在 JavaScript 的 程序 中 要 完成 各 种 各 样 的 运算 ， 是 离 不 开 运 算 符 的 。 它 用 于 将 一 个 或 几 
个 值 进 行 运算 而 得 出 所 需要 的 结果 值 。 在 JavaScript 的 常用 的 运算 符 有 算术 运算 符 、 比 较 运 算 
符 、 逻 辑 运算 符 。 

1. 算术 运算 符 

算术 运算 符 是 最 简单 、 最 常用 的 运算 符 ， 所 以 有 时 也 称 它们 为 简 让 


运算 符 。 可 以 使 用 它 


千 


ot 


们 进行 通用 的 数学 计算 ， 如 表 16-2 所 示 。 
表 16-2 算术 运算 符 

运算 符 “| 说 明 示例 
二 加 法 运算 符 ， 用 于 实现 对 两 个 数字 进行 求 和 |x+100、100+1000、+100 
- 减法 运算 符 或 负 值 运 算 符 100-60、-100 
乘法 运算 符 100*6 
/ 除法 运算 符 100/50 
% 求 模 运 算 符 ， 也 就 是 算术 中 的 求 余 100%30 

XxX++ 用 于 在 参与 其 他 运算 之 前 先 将 自己 加 1 后 ， 
二 将 变量 值 加 1 后 再 将 结果 赋值 给 该 变量 再 用 新 的 值 参 与 其 他 运算 

++X 用 于 先 用 原 值 与 其 他 运算 后 ， 再 将 自己 加 1 
呈 将 变量 值 减 1 后 再 将 结果 赋值 给 该 变量 xX--、-- 与 ++ 的 用 法 相同 

2. 比较 运算 符 


比较 运算 符 用 于 对 运算 符 的 两 个 表达 式 进 行 比较 ， 然 后 根据 比较 结果 返回 布尔 类 型 的 
值 。 例 如 ， 比 较 两 个 值 是 否 相同 或 比较 两 个 数字 值 的 大 小 等 。 在 表 16-3 中 列 出 了 JavaScript 支 
持 的 比较 运算 符 。 


表 16-3 比较 运算 符 


运算 符 说 明 示例 
Wa 判断 左右 两 边 表达 式 是 否 相 等 ， 当 左边 表达 式 等 于 右边 表达 式 时 返 |Number 一 100 

回 tme， 否 则 返回 false Numberl == Number2 
Ee 判断 左边 表达 式 是 否 不 等 于 右边 表达 式 ， 当 左边 表达 式 不 等 于 右边 | Number != 100 
_ 表达 时 返回 tue， 否 则 返回 false Numberl != Number2 
区 判断 左边 表达 式 是 否 大 于 右边 表达 式 ， 当 左边 表达 式 大 于 右边 表达 |Number > 100 

式 时 返回 ttue， 否 则 返回 false Numberl > Number2 
Se 判断 左边 表达 式 是 否 大 于 等 于 右边 表达 式 ， 当 边 表达 式 大 于 等 于 右 | Number >= 100 

边 表达 式 时 返回 ue， 否则 返回 false Numberl >= Number2 


人 、m 通 DIV+CSS3 网 页 布局 与 样式 


( 续 表 ) 
运算 符 | 说 明 示例 
过 判断 左边 表达 式 是 否 小 于 右边 表达 式 ， 当 左边 表达 式 小 于 右边 表达 |Number < 100 
式 时 返回 tue， 否 则 返回 false Numberl < Number2 
过 判断 左边 表达 式 是 否 小 于 等 于 右边 表达 式 ， 当 左边 表达 式 小 于 等 于 |Number <= 100 
右边 表达 式 时 返回 tue， 否 则 返回 false Numerl <= Number2 
3. 逻辑 运算 符 
逻辑 运算 符 通常 用 于 执行 布尔 运算 ， 它 们 常 和 比较 运算 符 一 起 使 用 来 表示 复杂 运算 ， 这 


些 运算 涉及 的 变量 通常 不 止 一 个 ， 而 且 常 用 于 过 、while 和 for 语 句 中 。 表 16-4 列 出 了 JavaScript 


支持 的 逻辑 运算 符 。 


表 16-4 逻辑 运算 符 


js [WW |am 


逻辑 与 ， 若 两 边 表达 式 的 值 都 为 tue， 则 返回 tue; 任意 一 | 100>60 &&100<200， 返 回 true 
个 值 为 false， 则 返回 false 100>50&&10>100， 返 回 false 


100>60|10>100， 返 
100>600||50>60， 返 


人 逻辑 或 ， 只 有 表达 式 的 值 都 为 false 时 ， 才 返回 false 


!(100>60) 返 回 false 
!(100>600) 返 回 true 


逻辑 非 ， 若 表达 式 的 值 为 tue， 则 返回 false， 否 则 返 tme 


除了 上 面 介绍 的 常用 运算 符 外 ，JavaScript 还 支持 条 件 表达 式 运算 符 “?”， 这 个 运算 符 是 


个 三 元 运算 符 ， 它 有 三 个 部 分 : 一 个 计算 值 的 条 件 和 两 个 根据 条 件 返 回 的 真 假 值 。 格 式 妇 
条 件 ? 表示 式 1 : 表达 式 2 


下 : 


在 使 用 条 件 运算 符 时 ， 如 果 条 件 为 真 ， 则 表达 式 的 值 使 用 表达 式 1 的 值 ， 否 则 使 


表达 


式 2 的 值 。 示 例如 下 : 


a 


| 


如 果 x 的 值 大 于 y 值 ， 则 表达 式 的 值 为 300， 否 则 x 的 值 小 于 或 等 于 y 值 时 ， 表 达 式 的 值 为 11。 


【 例 16.3】 实 例文 件 : ch16\16.3.html 


<html> 
<head> <script language = "Javascript"> 
Var a=3; 
Var b=5; 
Var c=b-a; 
document .write (c+"<br>"); 
if(a>b) 
{ document .write ("a 大 于 b<br>");} 
ese 
{ document .write ("a 小 于 b<br>");} 
document .write(a>b?"2":"3"); 
</script> 
</head><body></body> 
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</html> 


上 面 代码 创建 了 两 个 变量 a 和 b， 变 量 c 的 值 是 b 和 a 的 差 。 下 面 使 用 站 语句 判断 a 和 b 的 大 
小 ， 并 输出 结果 。 最 后 使 用 了 一 个 三 元 运算 符 ， 如 果 a>b， 则 输出 2; 否则 输出 3。<br> 表 示 在 
网 页 中 换行 ，“+” 是 一 个 连接 字符 串 。 

在 IE9.0 中 ， 浏 览 效 果 如 图 16-3 所 示 ， 可 以 看 到 网 页 输出 了 JavaScript 语 句 执行 结果 。 


< EIT CC 区 E 二 


| 
al\Fb 
3 


图 16-3 运算 符 使 用 


流程 控制 语句 


JavaScript 编 程 中 对 流程 的 控制 主要 是 通过 条 件 判断 、 循 环 控制 语句 以 及 continue、break 
来 完成 的 ， 其 中 条 件 判断 按 预先 设 定 的 条 件 执行 程序 ， 它 包括 过 语句 和 switch 语 句 ， 而 循环 控 
制 语句 则 可 以 重复 完成 任务 ， 它 包括 while 语 句 、do while 语 句 及 for 语 句 。 

1. if 语 句 

过 语句 是 普遍 使 用 的 条 件 选 择 语句 ， 每 一 种 编程 语言 都 有 一 种 或 多 种 形式 的 这 语句 ， 在 编 
程 中 它 是 经 常 被 用 到 的 。 

该 语句 格式 如 下 : 

if (条 件 语句 ) 

{ 

执行 语句 ; 

} 

其 中 的 “条 件 语 句 ”可 以 是 任何 一 种 逻辑 表达 式 ， 如 果 “ 条 件 语 句 ” 的 返回 结果 为 
true， 则 程序 先 执行 后 面 大 括号 对 全 中 的 “执行 语句 ”， 然 后 接着 执行 它 后 面 的 其 他 语句， 
如 果 “ 条 件 语句 ”的 返回 结果 为 false， 则 程序 跳 过 “条 件 语句 ”后 面 的 “执行 语句 ”， 直 接 
去 执行 程序 后 面 的 其 他 语句 。 大 括号 的 作用 就 是 将 多 条 语句 组 合成 一 个 复合 语句 ， 作 为 一 个 
整体 来 处 理 ， 如 果 大 括号 中 只 有 一 条 语句 ， 这 对 大 括号 对 全 可 以 省 略 。 

2. if…else 语 句 


过"…else 语 句 通常 用 于 一 个 条 件 需要 两 个 程序 分 支 来 执行 的 情况 。 
该 语句 格式 如 下 ; 


if (条 件 语句 ) 
{ 


执行 语句 块 17 
上 
else 


5 
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执行 语句 块 2; 
} 


else 后 面部 分 的 从 句 。 
【 例 16.4】 实 例文 件 : ch16\16.4.html 


<html> 
<head> 
<script language = "JavaScript"> 
Var a="john"; 
if(a!="john") 
{ 
document .write("<hl] style='text— 
align:center;color:red;'> 欢 迎 JOHN 光 临 </h1>")， 
} 


else{ 


weight:bolder;color:blue' > 请 重新 输入 名 称 </p>") 7 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


上 面 代码 中 使 用 过 …else 语 句 ， 对 变量 a 的 值 进行 判断 ， 如 果 a 值 不 等 


document .write("<p style='font-size:15px;font— 


色 标题 ， 否 则 输出 蓝 色 信息 。 


CY onsenm -ox] Eom ER 


se | 


图 16-4 if…else 语 句 判 断 


3. switch 选 择 语句 


语句 。 
该 语句 格式 如 下 : 


switch (表达 式 ) 
' 
case 取 值 1 . 
语句 块 1; break; 
case 取 值 2 3 
语句 块 2; break; 


这 种 格式 在 让 从 句 的 后 面 添加 一 个 else 从 句 ， 这 样 当 条 件 语 句 返 回 结果 为 false 时 ， 执 行 


于 “john” 则 输出 红 


在 IE9.0 中 浏览 效果 如 图 16-4 所 示 ， 可 以 看 到 网 页 输出 了 蓝 色 信息 “请 重新 输入 名 称 ”。 


switch 选 择 语句 用 于 将 一 个 表达 式 的 结果 同 多 个 值 进行 比较 ， 并 根据 比较 结果 选择 执行 
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Case 取 值 n: 
语句 块 n; preak; 
default : 
语句 块 n+1; 
4 
case 语 句 只 是 相当 于 定义 一 个 标记 位 置 ， 程 序 根据 switch 条 件 表达 式 的 结果 ， 直 接 跳 转 到 
第 一 个 匹配 的 标记 位 置 处 ， 开 始 顺序 执行 后 面 的 所 有 程序 代码 ， 包 括 后 面 的 其 他 case 语 句 下 的 
代码 ， 直 到 碰 到 break 语 句 或 函数 返回 语句 为 止 。default 语 句 是 可 选 的 ， 它 匹配 上 面 所 有 case 语 
句 定 义 的 值 以 外 的 其 他 值 ， 也 就 是 前 面 所 有 取 值 都 不 满足 时 ， 就 执行 default 后 面 的 语句 块 。 
4. while 语 名 
while 语 句 是 循环 语句 ， 也 是 条 件 判断 语句 。 
该 语句 格式 如 下 : 
while (条 件 表达 式 语句 ) 


{ 
执行 语句 块 


当 “ 条 件 表达 式 语句 ”的 返回 值 为 true 时 ， 则 执行 大 括号 菩 中 的 语句 块 ， 当 执行 完 大 括 
号 位 中 的 语句 块 后 ， 再 次 检测 条 件 表达 式 的 返回 值 ， 如 果 返 回 值 还 为 tue， 则 重复 执行 大 括 
号 们 中 的 语句 块 ， 直 到 返回 值 为 false 时 ， 结 束 整 个 循环 过 程 ， 接 着 往 下 执行 while 代 码 段 后 面 
的 程序 代码 。 

5. do*…while 语 句 

do…while 语 句 的 功能 和 while 语 句 差 不 多 ， 只 不 过 它 是 在 执行 完 第 一 次 循环 之 后 才 检 测 条 
件 表达 式 的 值 ， 这 意味 着 包含 在 大 括号 中 的 代码 块 至 少 要 执行 一 次 ， 另 外 ，do…while 语 句 结 
尾 处 的 while 条 件 语句 的 括号 后 有 一 个 分 号 “;”。 

该 语句 格式 如 下 : 

do 

{ 

执行 语句 块 
}while (条 件 表 达 式 语句 ) ; 
6. for 语 名 


for 语 句 通常 由 两 部 分 组 成 ， 一 部 分 是 条 件 控制 部 分 ， 一 部 分 是 循环 部 分 。 
该 语句 格式 如 下 : 
for (初始 化 表达 式 ; 循环 条 件 表达 式 ; 循环 后 的 操作 表达 式 ) 


{ 
执行 语句 块 
} 
在 使 用 for 循 环 前 要 先 设 定 一 个 计数 器 变量 ， 可 以 在 for 循 环 之 前 预先 定义 ， 也 可 以 在 使 
用 时 直接 进行 定义 。 在 上 述 语法 格式 中 ，“ 初 始 化 表达 式 ”表示 计数 器 变量 的 初始 值 ，“ 特 
环 条 件 表达 式 ”是 一 个 计数 器 变量 的 表达 式 ， 决 定 了 计数 器 的 最 大 值 ， “循环 后 的 操作 表达 
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式 ” 表 示 循 环 的 步 长 ， 也 就 是 每 循环 一 次 ， 计 数 器 变量 值 的 变化 ， 该 变化 可 以 是 增 大 的 ， 也 
可 以 是 减 小 的 ， 或 进行 其 他 运算 。for 循 环 是 可 以 炭 套 的 ， 也 就 是 在 一 个 循环 里 还 可 以 有 另 一 
个 循环 。 

【 例 16.5】 实 例文 件 : ch16\16.5.html 


<html> 
<head> 
<script language = "Javascript"> 
for (Var i=0;i<5;i++){ 
document .write("<p style="'font-size:"+i+"0px'> 
欢迎 学 习 Javascript</p>"); 
} 
</script> 

</head> 

<body> 

</body> 

</html> 


上 面 代码 中 ， 使 用 for 循 环 输出 了 不 同 字体 大 小 的 语句 。 
在 IE9.0 中 ， 浏 览 效果 如 图 16-5 所 示 ， 可 以 看 到 网 页 输出 不 同 大 小 的 语句 ， 这 些 语 句 从 小 
到 大 进行 排列 。 


MD meee 5 cxj gonnanoues- “|e 本 


as 


欢迎 学 习 JavaScript 
欢迎 学 习 JavaScript 
欢迎 学 习 JavaScript 


图 16-5 for 循 环 


除了 上 面 的 语句 之 外 ，JavaScript 还 可 以 使 用 中 断 语句 break 和 continue。break 语 句 可 
以 中 止 循环 体 中 的 执行 语句 和 switch 语 句 。 一 个 无 标号 的 break 语 句 会 把 控制 传 给 当前 循环 
(while、do、for 或 switch) 的 下 一 条 语句 ， 如 果 有 标号 ， 控 制 会 被 传递 给 当前 方法 中 的 带 有 
这 一 标号 的 循环 语句 。continue 语 句 只 能 出 现在 循环 语句 〈(while、do、for) 的 循环 体 中 ， 无 
标号 的 continue 语 句 的 作用 是 跳 过 当前 循环 的 剩余 部 分 ， 接 着 执行 下 一 次 循环 。 


函数 
如 果 在 一 个 程序 中 需要 使 用 某 个 功能 代码 达到 10 次 或 更 多 ， 这 时 可 以 将 这 这 个 功能 代 
码 组 成 一 个 可 以 调用 的 函数 ， 通 过 调用 该 函数 来 执行 相应 的 语句 ， 这 样 程序 就 将 变 得 非常 简 
洁 ， 且 便于 后 期 进行 维护 。 
在 JavaScript 中 定义 一 个 函数 ， 必 须 以 function 关 键 字 开头 ， 函 数 名 跟 在 关键 字 的 后 面 ， 
接着 是 函数 参数 列表 和 函数 所 执行 的 程序 代码 段 。 定 义 一 个 函数 格式 如 下 : 
function 函数 名 (参数 列表 ) 
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程序 代码 ; 
return 表达 式 ; 


在 上 述 格式 中 ，“ 参 数列 表 ” 表 示 在 程序 中 调用 某 个 函数 时 ， 一 串 传 递 到 函数 中 的 某 种 
类 型 的 值 或 变量 ， 如 果 这 样 的 参数 多 于 一 个 ， 那 么 两 个 参数 之 间 需 要 用 逗号 隔 开 。 虽 然 有 些 


函数 并 不 需要 接收 任何 参数 ， 但 在 定义 函数 时 也 不 能 省 略 函 数 名 后 面 的 那 对 小 括号 ， 保 留 小 


括号 中 的 内 容 为 空 即 可 。 


另外 ， 函 数 中 的 程序 代码 必须 位 于 一 对 大 括号 之 间 ， 如 果 主 程序 要 求 返 回 一 个 结果 集 ， 
就 必须 使 用 return 语 句 ， 后 面 跟 上 这 个 要 返回 的 结果 。 当 然 ，return 语 句 后 可 以 跟 上 一 个 表达 
值 将 是 表达 式 的 运算 结果 。 如 果 在 函数 程序 代码 中 省 略 了 retum 语 句 后 的 表达 式 ， 或 


式 ， 返 
者 函数 结束 时 没有 retum 语 句 ， 这 个 函数 就 返回 一 个 undefined 的 值 。 
【 例 16.6】 实 例文 件 : ch16\16.6.html 


<html> 

<head> 

<title> 计 算 器 </title> 

<script language="JavaScript" > 
function compute (op) 


{ 


曲 


Var numl=0; 
Var num2=0; 
numl=parseFloat (document .myform.numl .value); 
num2=parseFloat (document .myform.num2 .value) 7 
if (op=="+") 
document .myform.result.value=numl+num2 7 
Ee ss) 
document .myform.result.value=numl-num2 7 
EEE 
document .myform.result.value=numl*num2 ; 
if (op=="/" && num2!=0) 
document .myform.result.value=numl/num2 ; 
} 
</script> 
</head> 
<body> 
<form action="" method="post" name="myform" id="myform"> 
<p> 第 一 个 数 
<input name="numl" type="text" id="numl" size="25"> 
<br> 
第 二 个 数 
<input name="num2" type="text" id="num2" size="25"> 
</p> 
<p> 
<input name="addbutton™" type="button" id="addbutton" value=" 
onclick="compute('+')"> 
<input name="subbutton" type="button" id="subbutton" value=" 
onclick="compute('—"')"> 
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<input name="mulbutton™" type="button" id="mulbutton" value=" XX 


onclick="compute('*"')"> 


<input name="divbutton" type="button" id="divbutton" value=" 二 


onclick="compute('/')"> 


</p> 


<p> 计 算 结果 


<input name="result" type="text" id="result” size="25"> 


</p> 
</form> 


<p>gnbsp; </p> 


</body> 
</html> 


在 IE9.0 中 ， 浏 览 效 果 如 图 16-6 所 示 ， 可 以 看 到 网 页 输入 两 个 不 同 的 数值 ， 可 以 求 它们 的 
和 、 差 、 积 和 商 。 


JavaScript 不 但 允许 用 户 根 据 自己 的 需要 


[< 二 二 


图 16-6 使 用 函数 


定义 函数 ， 还 支持 大 量 的 系统 函数 。 常 用 的 系 


统 函数 如 表 16-5 所 示 。 
表 16-5 常用 系统 函数 

函数 名 称 说 明 

eval() 返回 字符 串 表 达 式 中 的 值 

parseInt() 返回 不 同 进 制 的 数 ， 默 认 是 十 进 制 ， 用 于 将 一 个 字符 串 按 指 定 的 进 制 转换 成 一 个 整数 
parseFloat() 实数 ， 用 于 将 一 个 字符 串 转 换 成 对 应 的 小 数 

escape() 返回 对 一 个 字符 串 进行 编码 后 的 结果 字符 串 

encodeURI 返回 一 个 对 URI 字 符 串 编码 后 的 结果 

decodeURI 将 一 个 已 编码 的 URI 字 符 串 解码 成 最 原始 的 字符 串 返 回 

Unescape 0 将 一 个 用 escape 方 法 编码 的 结果 字符 串 解码 成 原始 字符 串 并 返回 

isNaNO 检测 parseInt() 和 parseFloat0 函 数 返回 值 是 否 为 非 数值 型 ， 如 果 是 ， 返 回 true; 否则 ， 返 加 

false 

abs(x) 返回 x 的 绝对 值 

acos(x) 返回 x 的 反 余弦 值 ( 余 弦 值 等 于 x 的 角度 ) ， 用 弧度 表示 

asin(x) 返回 x 的 反正 弦 值 

atan(x) 返回 x 的 反正 切 值 

atan2(x.y) 返回 复 平面 内 点 (Xx， 劝 对 应 的 复数 的 幅 角 ， 用 弧度 表示 ， 其 值 在 -x ~x 之 间 

ceil(x) 返回 大 于 等 于 x 的 最 小 束 数 
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( 续 表 ) 

函数 名 称 说 明 

cos(x) 返回 x 的 余弦 

exp(x) 返回 e 的 x 次 需 (e”) 

floor(x) 返回 小 于 等 于 x 的 最 大 整数 

log(x) 返回 x 的 自然 对 数 (In x) 

max(a, b) 返回 a、b 中 较 大 的 数 

min(a, b) 返回 a、b 中 较 小 的 数 

pow(n, m) 返回 n 的 m 次 圳 (n”) 

random() 返回 大 于 0 小 于 1 的 一 个 随机 数 

round(x) 返回 x 四 舍 五 入 后 的 值 

sin(x) 返回 x 的 正弦 值 

sqrt(x) 返回 x 的 平方 根 

a 返回 x 的 正切 值 。isFinite0 如 果 括号 内 的 数字 是 “有限” 的 ( 介 于 NumberMIN_VALUE 和 
Number.MAX_VALUE 之 间 ) 就 返回 true; 否则 返回 false 

toStringO 用 法 : < 对 象 >.toString(); 把 对 象 转换 成 字符 串 。 如 果 在 括号 中 指定 一 个 数值 ， 则 转换 过 
程 中 所 有 数值 转换 成 特定 进 制 


6.3 综合 实例 1 一 一 打字 效果 的 文字 


文字 是 网 页 的 灵魂 ， 没 有 文字 的 网 页 ， 不 管 特效 多 么 绚丽 多 彩 必定 没有 任何 实际 意义 。 
文字 特效 始终 是 网 页 设计 追求 的 目标 ， 通 过 JavaScript 可 以 实现 多 个 网 页 特效 。 文 字 的 打字 效 
果 是 JavaScript 脚 本 程序 ， 将 预先 设置 好 的 文字 逐一 在 页 面 上 显示 出 来 。 具 体 步骤 如 下 所 示 。 

加 分 析 需 求 。 

如 果 要 在 网 页 中 实现 打字 效果 ， 需 要 创建 一 段 预先 设置 好 的 文字 ， 作 为 输出 信息 。 本 实 


例 的 效果 如 


医 


16-7 所 示 。 


思 创建 HTML 页 面 ， 设 置 页 面 基 本 样式 。 


<html> 
<head> 
<title> 打 字 效 果 的 文字 </title> 

<style type="text/css"> 
body{font-size:14px;font-weight:bold;} 
</style> 
</head> 
<body> 
松 风 水 月 最 新 微 博信 息 : <a id="HotNews" href="" target=" blank"></a> 
</body> 
</html> 
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上 面 代码 中 ， 在 <head> 标 记 中 间 ， 设 置 body 页 面 的 基本 样式 ， 例 如 字体 大 小 为 14px， 字 
形 加 粗 。 并 在 body 页 面 创建 了 一 个 超级 链接 。 
在 IE9.0 中 ， 浏 览 效 果 如 图 16-8 所 示 ， 可 以 看 到 页 面 中 只 显示 了 一 个 提示 信息 。 


€ ELE 


松 风 水 月 最 条 莹 生 信息 : 关心 


图 16-7 打字 效果 图 16-8 页 面 基 本 样式 


加 添加 JavaScript 代 码 ， 实 现 打字 特效 。 


<script language="JavaScript"> 

3 

var NewsTime = 2000; // 每 条 微 博 的 停留 时 间 
Var TextTime = 50; // 微 博文 字 出 现 等 待 时 间 ， 越 小 越 快 
Var newsi = 07 

var txti = 0; 

Var txttimer; 

Var newstimer; 

var newstitle = new Array(); // 微 博 标题 
Var newshref = new Array(); // 微 博 链接 
newstitle[0] = "健康 是 身体 的 本 钱 "7 


newshref[0] = "#"; 

newstitle[1] = "关心 身体 ， 就 是 关心 自己 "; 
newshref[1] = "#"; 

newstitle[2] = "去 西藏 旅游 了 "; 
newshref[2] = "#"; 

newstitle[3] = "大 雨 倾盆 ， 很 大 呀 "7 
newshref[3] = "#"; 


function shownew() 
{ 
Var endstr = " " 
hwnewstr = newstitle[newsi]; 
newslink = newshref [newsi]; 
if (txti==(hwnewstr.length-1)) {endstr="";} 
if (txti>=hwnewstr.length) 


clearIinterval (txttimer); 
clearInterval (newstimer); 
newsi++; 

if (newsi>=newstitle.length) 


newstimer = setInterval ("shownew()",NewsTime); 
txti = 0; 
return; 
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» 
clearInterval (txttimer); 
document .getElementById ("HotNews") .href=newslink; 
document .getElementById ("HotNews") .innerHTML = hwnewstr. 
substring(0,txti+1)+endstr; 
txtit++? 
txttimer = setInterval ("shownew()",TextTime); 
} 
shownew (); 
> 
</script> 
因为 上 面 的 代码 是 一 个 整体 ， 这 里 就 不 分 开 介绍 了 。 上 面 的 JavaScript 代 码 中 ， 主 要 调 
shownew() 函 数 完 成 打字 效果 。 在 JavaScript 代 码 开 始 部 分 ， 定 义 了 多 个 变量 ， 其 中 数组 对 象 
newstitle 用 于 存放 文本 标题 。 下 面 创建 了 shownew() 函 数 ， 并 在 函数 中 通过 变量 和 条 件 获取 要 
显示 的 文字 ， 通 过 “setInterval("shownew()",NewsTime)” 语 句 输 出 文字 内 容 。 代 码 最 后 使 
shownew0 〇 语句 循环 执行 该 函数 中 的 输出 信息 。 
在 IE9.0 中 ， 浏 览 效果 如 图 16-7 所 示 ， 可 以 看 到 页 面 中 ， 在 提示 信息 后 ， 每 隔 一 定时 间 逐 
个 打出 单个 文字 ， 字 体 颜 色 为 蓝 色 。 


AHz 一 


16.4 ”综合 实例 2 一 一 文字 升降 特效 


有 的 网 页 为 了 加 大 广告 宣传 力度 ， 往 往 在 网 页 上 设置 一 个 自动 升降 的 文字 ， 吸引 人 
的 注意 力 。 当 单 击 这 个 升降 文字 时 ， 会 自动 跳 转 到 宣传 页 面 。 本 实例 将 使 用 JavaScript 和 CSS 
实现 文字 升降 效果 。 具 体 步骤 如 下 所 示 。 

分 析 需 求 。 

如 果 需 要 实现 文字 升降 ， 需 要 指定 文字 内 容 和 文字 升降 范围 ， 即 为 文字 在 HTML 页面 指 
定 一 个 层 ， 用 于 升降 文字 。 实 例 完 成 后 ， 实 际 效果 如 图 16-9 所 示 。 


[< EECEIEE IERE 


图 16-9 文字 升降 


轧 创建 HTML， 构 建 升降 div 层 。 


<html> 
<head> 
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<title> 升 降 的 文字 效果 </title> 
</head> 
<body> 


<div id="napis" style="position: absolute;top: -50;color: 


family: 宋 体 ; font-size:9pt;border:lpx #ddeecc solid"> 


性 


<a href="" style="font-size:12px;text-decoration:none;"> 
水 月 大 酒店 ， 欢 迎 天 下 来 宾 ! 

</a></div> 

<script language="JavaScript"> 

光一 

SetTimeout ('start() 'v20)7 

VA 

</script> 

</body> 

</html> 


#000000; font— 


上 面 代码 创建 了 一 个 div 层 ， 用 于 存放 升降 的 文字 ， 层 的 人 D 名 称 是 napis， 并 在 层 的 style 属 


接 ， 


Ph 定义 了 层 显示 样式 。 例 如 字体 大 小 、 带 有 边框 、 字 体 等 。 在 div 层 中 ， 


创建 了 一 个 超级 链 


并 设 定 了 超级 链接 的 样式 。 其 中 的 JavaScript 代 码 ， 用 于 定时 调用 start 函 数 。 
在 IE9.0 中 ， 浏 览 效 果 如 图 16-10 所 示 ， 可 以 看 到 页 面 空白 ,无 文字 显示 。 


加 添加 JavaScript 代 码 ， 实 现 文字 升降 。 


<script language="JavaScript"> 


<!-- 
done = 0; 
step= 4 


function anim(yp,yk) 

到 

if(document .layers) document .1layers ["napis"] .top=yp; 
else document .all["napis"] .style.top=yp; 
if(yp>yk) step = -4 

if(yp<60) step = 4 

setTimeout ('anim('+(ypt+step)+"', '+yK+"')"', 35); 
} 

function start() 

{ 

if(done) return 

done = 1; 

if (navigator.appName=="Netscape") 

{ 

var nap=document .getElementById ("napis"); 
nap.left=innerWidth/2 - 145; 
anim(60,innerHeight - 60) 

} 

else { 

napis.style.left=11; 

anim(60,document .body.offsetHeight - 60) 


1 
WA 
</script> 
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上 面 代 码 创 建 了 函数 anim0 和 start0， 其 中 anim0O) 函 数 用 于 设 定 每 次 升降 的 数值 ，startO 函 
于 设 定 每 次 开始 的 升降 坐标 。 在 IE9.0 中 ， 浏 览 效果 如 图 16-9 所 示 ， 可 以 看 到 页 面 中 超级 
榜 自 动 上 下 移动 。 


游 滋 


Ce eon 5-cx] 


图 16-10 空白 页 面 


16.5 ”综合 实例 3 一 一 跑马 灯 效果 


网 页 中 有 一 种 特效 称 为 跑马 灯 ， 即 文字 从 左 到 右 自动 输出 ， 和 晚上 写字 楼 的 广告 霓虹灯 
非常 相似 。 在 网 页 中 ， 如 果 CSS 样 式 设计 完美 ， 就 会 设计 出 更 加 靓丽 的 网 页 效果 ， 具 体 步骤 
如 下 所 示 。 

完成 跑马 灯 效 果 ， 需 要 使 用 JavaScript 语 言 设置 文字 内 容 、 移 动 速度 和 相应 输入 框 ， 使 用 CSS 
设置 显示 文字 样式 。 输 入 框 用 来 显示 水 平移 动 文字 。 实 例 完成 后 ， 实 际 效果 如 图 16-11 所 示 。 

轧 创建 HTML， 实 现 输入 表单 。 


<html> 

<head> 

<title> 跑 马 灯 </title> 
</head> 

<body onLoad="LenScrol1l ()"> 

<center> 

<form name="nextForm"> 

<input type=text name="lenText"> 

</form> 

</center> 

</body> 


上 面 代 码 非常 简单 ， 创 建 了 一 个 表单 ， 表 单 中 存放 了 一 个 文本 域 ， 用 于 显示 移动 文字 。 
在 IE9.0 中 ， 浏 览 效果 如 图 16-12 所 示 ， 可 以 看 到 页 面 中 只 是 存在 一 个 文本 域 ， 没 有 其 他 
显示 信息 。 
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< EGG “ee msm Poxlemn | 


黄河 风景 ”品味 中 原文 


图 16-11 马 灯 效果 图 16-12 实现 基本 表单 


日 添加 JavaScript 代 码 ， 实 现 文字 移动 。 


<script language="javascript"> 
var msg=" 品 味 中 原文 化 ， 寄 情 黄 河 风景 " ; / /移动 文字 
var interval = 400; / /移动 速度 


Var seq=0; 


function Lenscroll() { 


document .nextForm.lenText .value = msg.substring(seq, msg.length) + " 
Seq++7 
if ( seq > msg.length ) 
seq = 0; 
window.setTimeout ("LenScroll();", interval); 
F 


</script> 


上 面 代 码 中 ， 创 建 了 一 个 变量 msg 用 于 定义 移动 的 文字 内 容 ， 变 量 interval 用 于 定义 文字 
移动 速度 ，LenScroll0 函 数 用 于 在 表单 输入 框 中 显示 移动 信息 。 

在 IE9.0 中 ， 浏 览 效 果 如 图 16-13 所 示 ， 可 以 看 到 输入 框 中 显示 了 移动 信息 ， 并 且 从 右 向 
左 移动 。 

园 添加 CSS 代 码 ， 修 饰 输入 框 和 页 面 。 


<style type="text/css"> 
CY Wp 
bodyt{ 
background-color:#FFFFFF;  /* 页 面 背 景色 */ 
} 


"+ msg; 


input{ 
background:transparent; /* 输入 框 背景 透明 */ 
border:none; /* 无 边框 */ 
color:#ffb400; 


font-size:45px; 

font-weight:bold; 

font-family: 黑 体 ; 
}--></style> 


上 面 代码 设置 了 页 面 背景 颜色 为 白色 ， 在 input 标 记 选 择 器 中 ， 定 义 了 边框 背景 为 透明 ， 
即 无 边框 。 字 体 颜 色 为 黄色 ， 大 小 为 45px， 加 粗 并 黑体 显示 。 在 正 9.0 中 ， 浏 览 效果 如 图 16-11 
所 示 ， 可 以 看 到 ， 相 比较 原来 页 面 字体 变 大 ， 颜 色 为 黄色 ,没有 文本 框 显示 。 
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mm -exlsm 


河 丙 村 丙 村 各 妆 全 


图 16-13 实现 移动 效果 


Ar 一 


人 ,6 综合 实例 4 一 一 闪烁 图 片 


图 片 闪烁 是 常用 的 一 种 特效 ， 用 JavaScript 实 现 起 来 非常 简单 ， 只 是 需要 注意 时 间 间 隔 这 
个 参数 。 数 值 越 大 闪烁 越 不 连续 ， 数 值 越 小 闪烁 越 历 害 ， 可 以 随意 更 改 这 个 值 ， 直 到 取得 满 
意 的 效果 ， 具 体 步骤 如 下 所 示 。 

四 分 析 需 求 。 

将 图 片 放 在 一 个 DIV 层 上 ， 设 定 图 片 为 可 见 的 ， 然 后 使 用 JavaScript 程 序 代 码 设置 DIV 
的 显示 和 隐藏 ， 这 样 就 达到 了 图 片 的 闪烁 效果 。 实 例 完 成 后 ， 效 果 如 图 16-14 所 示 。 

创建 HTML 页 面 ， 构 建 DIV 层 。 


<html> 

<head> 

<title> 闪 烁 图 片 </title> 

</head> 

<body onload="socceronload()" topmargin="0"> 
<div id="soccer" style="position:absolute; left:150; top:0"> 
<a href=" "> 

<img src="feng.jpg" border="0"></a> 

</div> 

</body> 

</html> 


上 面 代码 中 ， 创 建 了 一 个 层 ， 其 ID 名 称 为 soccer， 样 式 为 绝对 定位 ， 坐 标 位 置 在 
(150,0) 。 然 后 在 层 中 创建 了 一 个 图 片 ， 不 带 边框 。 
在 IE9.0 中 浏览 时 ， 可 以 看 到 显示 一 张 图 片 ， 不 具有 闪烁 效果 。 


部 
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添加 JavaScript 代 码 ， 实 现 图 片 闪烁。 


<script language=" 


Javascript"> 


图 16-14 图 片 闪烁 


var msecs = 500; // 改 变 时 间 得 到 不 同 的 闪烁 间隔 


Var counter = 07 
function soccerOonl 
setTimeout ("blink( 
} 

function blink() { 


oad() { 
)", msecs); 


soccer.style.visibility = 


(soccer.style.visibility == "hidden") ? "visible" 


counter +=17 
setTimeout ("blink( 
} 


</script> 


)", msecs); 


ntddeny 


在 JavaScript 代 码 中 ， 创 建 变量 msecs 用 于 定义 闪烁 时 间 间 隔 ， 创 建 变 量 counter 
数 。 在 函数 soccerOnload0 中 ， 设 定 每 隔 指定 时 间 图 片 闪烁 一 次 ， 函 数 blinkO 用 于 设 定 
示 ， 即 图 片 是 隐藏 还 是 可 见 。 
如 图 16-14 所 示 ， 可 以 看 到 显示 一 个 图 片 ， 在 指定 时 间 内 闪烁 。 


在 正 9.0 中 ， 浏 览 效果 


[ 


在 广告 栏 中 ， 经 常会 出 现 从 右 到 左 移动 或 者 从 左 到 右 移动 的 、 一 张 或 者 多 张 的 图 


不 但 增加 页 面 效 果 ， 也 带 来 经 济 效益 。 本 实例 将 使 用 JavaScript 和 CSS 创 建 一 张 左右 移动 


片 。 具 体 步骤 如 下 所 示 。 
分 析 需 求 。 


实现 左右 移动 的 图 片 ， 需 要 再 页 面 上 定义 一 张 图 


片 对 象 ， 并 使 其 在 一 定 范 


围 内 ， 即 水 平方 向 上 自 


移动 。 实 例 的 效果 如 


计 


图 16-15 所 示 。 


图 | 


片 显 


16.7 ”综合 实例 5 一 一 左右 移动 的 图 片 


片 
的 


片 ， 然 后 利用 JavaSeript 程 序 代码 获取 


浆 
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图 16-15 图 片 移动 


创建 HTML 页 面 ， 导 入 图 片 。 


<html> 

<head> 

<title> 左 右 移动 图 片 </title> 

</head> 

<body> 

<img src="feng.jpg" name="picture" 

style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" 
HEIGHT="40"> 

<script language="JavaScript"><!-— 

setTimeout ("moveLR('picture',300,1)",10); 

//--></script> 

</body> 

</html> 


上 面 代码 中 ， 定 义 了 一 张 图 片 ， 图 片 是 绝对 定位 ， 左 边 位 置 是 (70,30) 无 边框 ， 宽 度 为 


140px， 高 度 为 40px。JavaScript 标 记 中 ， 使 用 setTimeout 方 法 ， 定 时 移动 图 片 。 
在 IE9.0 中 ， 浏 览 效 果 如 图 16-16 所 示 ， 可 以 看 到 网 页 上 显示 一 张 图 片 。 


| 


图 16-16 图 片 显示 


加 入 JavaScript 代 码 ， 实 现 图 片 左 右 移动 。 


<script language="JavaScript"><!-— 
step = 0; 

obj = new Image(); 

function anim(xp,xk,smer) //smer = direction 
让 

obj.style.left = x; 

X += step*smer; 

if (x>=(xk+xp)/2) { 

if (smer == 1) step--7 

tlse stepti+r 

li 


else { 


@、 wma DIV+CSS3 网 布局 与 # 式 


if (smer == 1) Step++7 
else step-——;? 

} 

LE (>= RE) 下 

xX = XK7 


LE (x <= "x0 


// if (smer > 2) smer = 3; 

setTimeout ('anim('+xpt+', '+xk+"', '+smer+')', 50); 

E 

function moveLR (objID,movingarea width,c) 

i 

if (navigator.appName=="Netscape") window width = window.innerWwidth; 
else window width = document.body.offsetWidth; 

obj = document.images [objID]; 

image width = obj.width; 

x1 = obj.style.left; 

x = Number (x1 .substring (0,xl1.length-2)); // 30px -> 30 

if (c == 0) { 

if (movingarea width == 0) { 

right margin = window width - image width; 

anim(x,right margin,1); 

Y 

else { 

right margin = x + movingarea width - image width; 

if (movingarea width < x + image width) window.alert ("No space for 
moving!"); 

else anim(x,right margin,1); 

} 

} 

else { 

if (movingarea width == 0) right margin = window width - image width; 
else { 

X= Math.round( (window width-movingarea width)/2); 

right margin = Math.round( (window width+movingarea width)/2)-image width; 
} 

anim(x,right margin,1); 

} 

} 


//--></script> 

上 面 代码 和 文字 水 平方 向 移动 的 原理 基本 相同 ， 只 不 过 对 象 不 同 ， 这 里 就 不 再 介绍 了 。 
在 IE9.0 中 ， 浏 览 效 果 如 图 16-15 所 示 ， 可 以 看 到 网 页 上 显示 一 张 图 片 ， 并 在 水 平方 向 上 
移动 。 
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16.8 综合 实例 6 一 一 向 上 滚动 的 菜单 


当 网 页 包含 信息 比较 多 的 时 候 ， 就 需要 设计 一 些 导航 菜单 以 方便 页 面 导航 。 如 果 使 用 
JavaScript 代码 ， 将 菜 生 


做 成 嫩 


容 ， 创 建 一 个 向 上 滚动 的 菜单 ， 
分 析 需 求 。 


实现 菜单 自动 从 下 到 上 滚动 ， 需 要 把 握 两 个 元 素 ; 一 个 是 使 用 JavaScript 实 现 要 滚动 的 


态 效果 ， 菜 单 将 会 更 加 吸引 人 。 本 实例 将 结合 前 面 学 习 的 内 
具体 步骤 如 下 所 示 。 


菜单 ， 即 导航 栏 ， 另 


所 示 。 


加 构建 HTML 页 面 。 


<html> 
<head> 


个 是 
i 下 


JavaScript 控 制 菜单 移动 的 方向 。 实 例 完成 后 效果 如 图 16-17 


<tit1le> 向 上 滚动 的 菜单 </title> 


</head> 


<body bgcolor="#FFFFFF" text="#000000"> 
</body></html> 


上 面 代码 比较 简章 
在 IE9.0 中 浏览 效果 如 


E， 只 是 实现 了 一 个 空白 页 面 ， 页 面 的 背景 色 为 白色 ， 前 景色 为 黑色 。 


图 16-18 所 示 ， 可 以 看 到 显示 了 一 个 空白 页 面 。 


图 16-17 菜单 滚动 


€ CT 2 TT EE ETT 7 al 


图 16-18 空白 HTML 页 面 


加 加 入 JavaScript 代 码 ， 实 现 菜单 滚动 。 


<script language=javascript> 


i 


Var index = 9 
link = new Array(8); 


link[0] 
link[1] 
link[2] 
link[3] 
link[4] 
link[5] 
link[6] 
link[7] 


="'timel. 
-htm' 


"time2 


'timel 


'time3 


= tdime2 


'time3. 
htm" 
"time2. 
-htm'" 
'timel. 
-htm'" 


htm' 


htm' 


htm' 


htm' 
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link[8] ='time3-htm'" 
text = new Array(8); 
text[0] =' 首 页 ' 

text [1] =' 产 品 天 地 ' 
text [2] =' 关 于 我 们 ' 
text[3] =' 资 讯 动 态 ' 
text [4] =' 服 务 支持 ' 
text[5] =' 会 员 中 心 ' 
text[6] =' 网 上 商城 ' 
text[7] =' 官 方 微 博 ' 
text[8] =' 企 业 文化 ' 


document .write ("<marquee scrollamount='1' scrolldelay="'100' direction= 


可 
二 


width='150' height="'150'>"); 
for (i=0;i<index;i++) 


{ 


document .write ("&nbsp;<img src='dian3.gif' width='12' height='12'><a 


href="+link[i]+" target=' blank'>"); 
document .write (text[i] + "</A><br>"); 
} 
document .write ("</marquee>") 
// --></script> 


上 面 代码 创建 了 两 个 数组 对 象 link 和 text， 用 来 存放 菜单 链接 对 象 和 菜单 内 容 ， 在 下 面 的 


JavaScript 代 码 中 ， 使 用 <marquee> 定 义 页 面 在 垂直 方向 上 下 移动 。 


在 IE9.0 中 浏览 效果 如 图 16-17 所 示 ， 可 以 看 到 页 面 左 侧 有 一 个 菜单 ， 自 下 向 上 


由 移动 。 


16.9 综合 实例 7 一 一 跟随 鼠标 移动 的 图 片 


在 众多 网 站 中 ， 特 别 是 游戏 网 站 或 小 型 商业 网 站 ， 都 喜欢 使 用 图 片 跟随 鼠标 的 特效 ， 一 
方面 可 以 在 鼠标 指针 旁边 加 上 网 站 说 明 的 相关 信息 或 者 欢迎 信息 ， 另 一 方面 也 吸引 人 的 注意 


力 ， 使 人 们 更 加 关注 此 类 网 站 。 本 实例 实现 图 片 跟随 鼠标 移动 的 特效 ， 具 体 步骤 
分 析 需 求 。 


下 所 示 。 


需要 通过 JavaScript 获 取 鼠 标 指针 的 位 置 ， 并 且 动 态 的 调整 图 片 的 位 置 。 图 片 通过 position 


的 绝对 定位 ， 可 以 很 容易 得 到 调整 。CSS 的 绝对 定位 是 JavaScript 调 整 页 面 元 素 常 
实例 完成 后 ， 效 果 如 图 16-19 所 示 。 


【< BE 


图 16-19 图 片 跟 随 鼠 标 移动 


的 方法 。 
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轧 创建 基本 HTMI 页 


<html > 

<head> 
<title> 随 鼠标 移动 的 图 片 </title> 
</head> 

<body> 

</body> 

</html> 


上 面 代码 比较 简单 ， 只 是 实现 了 一 个 HTML 页面 结构 ， 这 里 就 不 再 演示 了 。 
辆 添加 JavaScript 代 码 ， 实 现 图 片 跟随 鼠标 移动 。 
<script type="text/javascript"> 


function badRAD (html) 
{ 


回 


Var ad=document .body.appendChild(document .createElement ('div')); 
ad.style.cssText="border:lpx solid #000;background:#FFF;position:abso 
lute;padding:4px 4px 4px 4px;font: 12px/1.5 verdana;"; 
ad.innerHTML=html||'This is bad ideal!'; 
Var c=ad.appendChild (document .createElement ('span')); 
c.innerHTML="X"; 
c.style.cssText="position:absolute;right:4px;top:2px;cursor:pointer"; 
c.onclick=function (){ 
document .onmousemove=null; 
this.parentNode.style.left=’ -99999px’ 
ls 
document .onmousemove=function (e){ 
e=e| |window.event; 
Var x=e.clientX,y=e.clientYy; 
setTimeout (function() { 
if(ad.hover) return; 
ad.style.left=x+5+'px'? 
ad.style.top=y+5+'px"'? 
},120) 


ad.onmouseover=function (){ 
this.hover=true 

}; 

ad.onmouseout=function (){ 
this.hover=false 


} 

badaAD ('<img src="18.png">"') 

</script> 

上 面 代码 中 ， 使 用 appendChild0 方 法 为 当前 页 面 创建 了 一 个 DIV 对 象 ， 并 为 div 层 设置 了 
相应 样式 。 下 面 的 e.clientX 和 e.clientY 语 句 确定 鼠标 位 置 ， 并 动态 调整 图 片 位 置 ， 从 而 实现 图 
片 移动 效果 。 在 IE9.0 中 ， 浏 览 效果 如 图 16-19 所 示 ， 可 以 看 到 鼠标 在 页 面 移动 时 ， 图 片 跟 着 
移动 。 


辕 
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AP 


人 :10 ”综合 实例 8 一 一 树 形 菜单 


作为 一 个 首页 ， 其 特点 之 一 是 需要 导航 的 页 面 很 多 ， 有 时 为 了 效果 不 得 不 将 所 有 需要 呈 


航 的 部 分 都 放 到 一 个 导航 菜单 中 。 树 形 是 网 页 设计 中 最 常用 的 菜单 之 一 。 本 实例 将 
En ， 具体 步 森 如 下 所 示 。 

分 析 需 求 。 

ee 个 树 形 菜单 ， 需 ee ， 一 个 是 <ul> 无 序列 表 ， 用 于 显示 的 菜单 ;一 个 


0 修饰 树 形 菜单 样式 ; 个 是 JavaSeript 程序 ， 实 现 单 击 时 展开 菜单 选项 。 实 例 完 
成 后 ， 效 果 如 图 16-20 所 示 。 


图 16-20 树 形 菜单 


轧 创建 HTML 页 面 ， 实 现 菜单 列表 。 


<html > 
<head> 
<title> 树 形 菜单 </title> 
</head> 
<body> 
<ul id="menu zzjs net"> 
Ka 
<label><a href="javascript:;"> 计 算 机 图 书 </a></1label> 
<ul class="two"> 
<1i> 
<label><a href="javascript:;"> 程 序 类 图 书 </a></label> 
<ul class="two"> 
< 


<label><input typ 


"checkbox" value="123456"><a 
href="javascript:;">Java 类 图 书 </a></label> 

<ul class="two"> 

<1i><label><input type="checkbox" value="123456"><a 


href="javascript:;">Java 语 言 类 图 像 </a></label></1i> 
<1i> 
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<label><input type="checkbox" value="123456"><a 
href="javascript:;">Java 杠 架 类 图 像 </a></label> 
<ul class="two"> 
<1i> 
<label><input type="checkbox" value="123456"><a 
href="javascript:;">Struts2 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">strutsl</a></label></1i> 
<li><label><input type="checkbox" value="123456"><a 
avascript:;">Struts2</a></label></1i> 
</ul> 
</ii> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">Hibernate 入 门 </a></label></1i> 
</ul> 
<AELS 
</ul> 
</1i> 
</ul> 
</Li> 
<1i> 
<label><a href="javascript:;"> 设 计 类 图 像 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">PS 实 例 大 全 </a></label></1i> 
<li><label><input type="checkbox" value="123456"><a 
href="javascript:;">Flash 基 础 入 门 </a></label></1i> 
</ul> 
</TE 
</ul> 
</1i> 
</ul> 
</body> 
</html> 


在 IE9.0 中 ， 浏 览 效果 如 图 16-21 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显示 ， 并 且 显 示 全 部 
元 素 ， 字 体 颜色 为 蓝 色 。 


href=" 


le wo sexlemae | 


计算 机 图 书 


。 晶 Java 类 图 书 
。DJava 语 言 类 图 像 
。 Java 框架 类 图 像 
。 晶 Struts2 图 书 


» EStrutsl 
» EStruts2 
。 aHibernate 入 门 
。 设 计 类 图 像 
。 昌 PS 实例 大 全 
。DmFlash 基 础 入 门 


图 16-21 无 序列 表 
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国 添加 JavaScript 代 码 ， 实 现 单 击 展开 。 


<script tyYpe="text/javascript"” > 
function addEvent (el,name, fn){// 绑 定 事件 
if(el.addEventListener) return el.addEventListener (name,fn,false); 
return el.attachEvent ('on'+name, fn); 
} 
function nextnode (node){// 寻 找 下 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!node)return 7 
if(node.nodeType == 1) 
return node; 
if(node.nextSibling) 
return nextnode (node.nextSibling); 
} 
function prevnode (node){// 寻 找 上 一 个 兄弟 并 剔除 空 的 文本 节点 
if(!node)return 7 
if(node.nodeType == 1) 
return node; 
if(node.previousSibling) 
return prevnode (node.previousSibling); 


. 
function parcheck (self, checked) {// 递 归 寻 找 父亲 元 素 ， 并 找到 input 元 素 进行 操作 
Var par = prevnode (self.parentNode.parentNode.parentNode. 
previousSsibling),parspar; 
if(parg&par.getElementsByTagName ('input') [0])1{ 
par.getElementsByTagName ('input') [0] .checked = checked; 
parcheck (par.getElementsByTagName ('input') [0],sibcheck (par. 
getElementsByTagName ('input') [0])); 
} 
} 
function sibcheck (self) {// 判 断 兄弟 节点 是 否 已 经 全 部 选中 
Var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0; 
Eor (Var i=0;i<sbi.length;i++){ 
if(sbi[il.nodeType != 1)// 由 于 孩子 结 点 中 包括 空 的 文本 节点 ， 所 以 这 里 累计 长 度 的 时 候 
也 要 算 上 去 
n++? 
else if(sbi[i] .getElementsByTagName ('input') [0] .checked) 
nes 
} 
return n==sbi.length?true:false; 
} 
addEvent (document .getElementById('menu zzjs net'),'click',function(e){ 
// 绑 定 input 点 击 事件 ， 使 用 menu_zzjs_net 根 元 素 代 理 
e = ellwindow.event; 
Var target = e.target|le.srcElement; 
Var tp = nextnode (target .parentNode.nextSibling); 
Switch (target.nodeName) { 
case 'A!' :// 点 击 A 标签 展 开 和 收缩 树 形 目 录 ， 并 改变 其 样式 选中 checkbox 
if(tpg&&tp.nodeName == 'UL'){ 
if(tp.style.display != "block" ){ 
tp.style.display = 'block'; 
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prevnode (target .parentNode .previousSibling) .className = 'ren' 
}else{ 
tp.style.display = 'none'; 
prevnode (target .parentNode.previousSibling) .className = 'add' 
} 

} 

break; 


case 'SPAN' :// 点 击 图 标 只 展开 或 者 收缩 
Var ap = nextnode (nextnode (target .nextSibling) .nextSibling); 
if(ap.style.display != "block' ){ 

ap.style.display = 'block'; 

target.className = 'ren’' 


}elsef{ 

ap.style.display = 'none'7 
target.className = "add'" 

} 

break; 


case 'INPUT' :// 点 击 checkbox， 父 亲 元 素 选 中 ， 则 孩子 节点 中 的 checkbox 也 同时 选中 ; 
孩子 结 点 取消 ， 父 元 素 随 之 取消 
if(target.checked){ 
if(tp){ 
Var checkbox = tp.getElementsByTagName ('input'); 
Eor (var i=0;i<checkbox.length;i++) 
checkbox[i] .checked = true; 
jelsei{ 
if(tp){ 
Var checkbox = tp.getElementsByTagName ('input'); 
forl(var i=0;i<checkbox.length;i++) 
checkbox[i].checked = false; 
} 
} 
parcheck (target, sibcheck(target) ) ;// 当 孩子 结 点 取消 选中 的 时 候 ， 调 用 该 方法 递 
归 ， 其 父 节点 的 checkbox 逐 一 取消 选中 
break; 
hn 
DD); 
window.onload = function(){// 页 面 加 载 时 给 有 孩子 结 点 的 元 素 动态 添加 图 标 
Var labels = document.getElementBYId ('menu_zz]js_net') . 
getElementsByTagName ('label'); 
Eor (var i=0;i<labels.length;i++){ 
var span = document .createElement ('span') 7 
span.style.cssText ='display:inline-block;height:18px;vertical-align: 
middle;width:16px;cursor:pointer;'; 
span.innerHTML = " 上 
span.className = 'add'; 
if(nextnode (labels[i] .nextSibling) gtnextnode (labels[i] .nextSibling). 
‘UL') 
labels[i] .parentNode .insertBefore (span,labels[i]); 


nodeName 


es 
labels[i].className = 'rem’' 
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} 
} 
</script> 
在 IE9.0 中 ， 浏 览 效果 如 图 16-22 所 示 ， 可 以 看 到 无 序列 表 在 页 面 上 显示 ， 使 用 鼠标 单 击 
可 以 展开 或 关闭 相应 的 选项 ， 但 其 样式 非常 难看 。 


图 16-22 实现 鼠标 单 击 事件 


添加 CSS 代 码 ， 修 饰 列表 选项 。 


<style type="text/css"> 

body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} 

ul,li, {margin:0;padding:0;} 

ul{list-style:none;} 

#menu zzjs_ net{margin:10px;width:200px;overflow:hidden;} 

#menu zzjs net li{line-height:25px;} 

#menu zzjs_net .rem{padding-left:16px;} 

#menu zzjs net .add{background:url() -4px -31lpx no-repeat;} 

#menu zzjs net .ren{background:url() -4px -7px no-repeat;} 

#menu zzjs net li a{color:#666666;padding-left:S5px;outline:none;blr:expres 
sion(this.onFocus=this.blur());} 

#menu zzjs net li input{vertical-align:middle;margin-left:S5px;} 

#menu zzjs_ net .two{padding-left:20px;display:none;} 

</style> 


在 正 9.0 中 ， 浏 览 效果 如 图 16-20 所 示 ， 相 比较 原来 的 页 面 ， 可 以 看 到 样式 变 得 非常 漂亮 。 


16.11 综合 实例 9 一 一 时 钟 特效 


在 HIML5 技 术 中 ， 新 增 了 一 个 容器 画布 canvas， 用 来 在 页 面 上 绘制 一 些 图 形 ， 利 用 这 个 
新 的 特性 ， 可 以 在 网 页 中 创建 一 个 类 似 于 钟表 的 特效 。 本 实例 结合 第 2 章 知识 ， 创 建 了 一 个 
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时 钟 特效 。 具 体 步骤 如 下 所 示 。 
分 析 需 求 。 
在 画布 上 绘制 时 钟 ， 需 要 绘制 几 个 必要 的 图 形 ， 即 表盘 、 时 针 、 分 针 、 秒 针 和 中 心 圆 。 
将 上 面 几 个 图 形 组 合 起 来 ， 构 成 一 个 时 针 界 面 ， 然 后 后 使 用 JavaSeript 代 入 ， 根据 时 间 移 动 秒 
针 、 分 针 和 时 针 。 实 例 完成 后 ， 效 果 如 图 16-23 所 示 。 


a 


ern 


16-23 时 钟 特效 
贺 创建 HTML 页 面 。 


<html> 

<head> 
<title>canvas 时 钟 </title> 
</head><body> 


<canvas id="canvas" width="200" height="200" style="border:lpx solid 
#000;"> 您 的 浏览 器 不 支持 canvas。</canvas></body></html> 


上 面 代码 创建 了 一 个 画布 ， 其 宽度 为 200px， 高 度 为 200px， 带 有 边框 ， 颜 色 为 黑色 ， 样 


式 为 直线 型 。 在 Firefox 5.0 中 浏览 效果 如 图 16-24 所 示 ， 可 以 看 到 显示 了 一 个 带 有 黑色 边框 的 
画布 ， 画 布 中 没有 任何 信息 。 


ER 
FEED 


图 16-24 定义 画布 


加 添加 JavaScript， 绘 制 不 同 图 形 。 


<script type="text/javascript" language="javascript" charset="utf-8"> 
var canvas = document .getElementById('canvas'); 
Var ctx = canvas.getContext('2d'); 
EtcEx) 
Var timerId; 
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Var frameRate = 60; 
function canVObject ()1{ 
this.x = 07 
this.y = 0; 
this.rotation = 0; 
this.borderWidth = 2; 
this.borderColor = "#000000°'; 
this.fill = false; 
this.fillColor = '#ff0000'; 
this.update = function(){ 
if(!this.ctx)throw new Error(' 你 没有 指定 ctx 对 象 。'); 
var ctx = this.ctx 
ctx.save(); 
ctx.lineWidth = this.borderWidth; 
ctx.strokeSstyle = this.borderColor; 
ctx.fillstyle = this.fillColor; 
ctx.translate (this.x, this.y); 
if(this.rotation)ctx.rotate (this.rotation * Math.PI/180); 
if(this.draw)this.draw (ctx); 
if(this.fill)ctx.fill (); 
ctx.stroke(); 
ctx.restore(); 
| Te 
timerId = setInterval (function(){ 
// 清除 画布 
ctx.clearRect (0,0,200,200); 
// 填充 背景 色 
ctx.fillstyle = 'orange'; 
ctx.fillRect (0,0,200,200); 
// 表盘 
circle.update(); 
// 刻度 
for (var i=0;cache=ls[i++];)cache.update(); 
/7 时 针 
hour .rotation = (new Date()) .getHours () * 30; 
hour .update () 7 
// 分 针 
minute.rotation = (new Date()) .getMinutes () * 67 
minute.update(); 
// 秒针 
seconds.rotation = (new Date()) .getSeconds() * 6; 
seconds .update (); 
// 中 心 圆 
center.update(); 
}, (1000/frameRate) 10) 7 
}elsef{ 
alert (' 您 的 浏览 器 不 支持 canvas 无 法 预览 .\n 跟 我 一 起 说 : "很 遗憾 !"') ; 
} 
</script> 


上 面 代码 由 于 篇 幅 比 较 长 ， 只 给 出 了 部 分 代码 ， 完 整 代 码 可 以 在 光盘 中 查询 。 上 面 代码 
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首先 绘制 不 同类 型 的 图 形 ， 例 如 时 针 ， 秒 针 和 分 针 等 。 然 后 再 将 其 组 合 在 一 起 ， 并 根据 时 间 
定义 时 针 等 指向 。 在 Firefox 5.0 中 ， 浏 览 效果 如 图 16-22 所 示 ， 可 以 看 到 页 面 中 出 现 了 一 个 时 
钟 ， 其 秒针 在 不 停 地 移动 。 


[一 


16.12 ”综合 实例 10 一 一 颜色 选择 器 


在 页 面 中 定义 背景 色 和 字体 颜色 ， 是 比较 常见 的 一 种 操作 ， 往 往 选取 颜色 时 比较 为 难 ， 
不 知道 哪 种 颜色 适合 ， 并 且 颜 色 值 还 不 知道 是 什么 。 此 时 可 以 利用 颜色 选择 器 来 定义 颜色 并 
获取 颜色 值 。 本 实例 将 创建 一 个 颜色 选择 器 ， 以 方便 获取 颜色 值 ， 具 体 步骤 如 下 所 示 。 

加 分 析 需 求 。 

本 实例 原理 非常 简单 ， 就 是 将 几 个 常用 的 颜色 值 进 行 组 合 ， 组 合 在 一 起 后 合并 ， 即 是 所 
要 选择 的 颜色 值 。 这 些 都 是 利用 JavaScript 代 码 完成 的 。 实 例 的 效果 如 图 16-25 所 示 。 


图 16-25 设 定 页 面 背景 色 


贺 创建 基本 HTML 页 面 。 


<html> 
<head><title> 背 景色 选择 器 </title> 
</head> 

<body bgcolor="#FFFFFF"> 
</body></html> 


上 述 代 码 比 较 简单 ， 只 实现 了 一 个 页 面 框架 ， 这 里 就 不 再 分 析 了 。 
加 添加 JavaScript 代 码 ， 实 现 颜 色 选 择 。 


<script language="JavaScript"> 
-三 三 


Var hex = new RARrray(6) 


hex[0] = "FF™ 
hextil = Cc” 
hext21 := 99” 
hex[3] = "66" 
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QQ、 ms DIV+CSS3 网 页 布局 与 样 式 


hex[4] = "33" 
hex[5] = "00" 
function display(triplet) 
{ 
document .bgColor = '#" + triplet 
alert (' 现 在 的 背景 色 是 # +triplet) 
} 
function drawCell (red, green, blue) 
k 
document .write('<TD BGCOLOR="#"' + red + green + blue + '">') 
document .write('<A HREF="javascript:display(\'' + (red + green + blue) + 
"Nr') ">') 
document .write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>') 
document .write('</A>') 
document .write('</TD>') 
1 
function drawRow (red, blue) 
R 
document .write('<TR>') 
Or (a 二 98 本 6) 
{ 
drawCell (red, hex[i], blue) 
} document.write('</TR>') 
}function drawTable (blue) 
{ 
document .write('<TRBLE CELLPADDING=0 CELLSPACING=0 BORDER=0>') 
for (va 1 = 0 < 6 tt 
{ 
drawRow (hex [i], blue) 
} 
document .write('</TABLE>') 
} 
function drawCube() 
{ 
document .write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>') 
for (var i = 0 1 < 67 十 FE) 
汪 
document .write('<TD BGCOLOR="#FFFFFF">') 
drawTable (hex[i]) 
document .write('</TD>') 
} document.write('</TR></TABLE>') 
}drawCube () 
/==></acript> 


上 面 代码 中 ， 创 建 了 一 个 数组 对 象 hex 用 来 存放 不 同 的 颜色 值 。 下 面 几 个 函数 分 别 将 数组 
中 的 颜色 组 合 在 一 起 ， 并 在 页 面 中 显示 ，display 函 数 完成 定义 背景 颜色 和 显示 颜色 值 。 

在 IE9.0 中 ， 浏 览 效果 如 图 16-25 所 示 ， 可 以 看 到 页 面 显示 多 个 表格 ， 每 个 单元 格 代表 一 
种 颜色 。 
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16.13 ”专家 解 惑 


1. JavaScript 中 ， 数 组 常用 的 方法 有 哪些 ? 
(1) jom0， 将 array 中 的 所 有 element 以 string 的 形式 连 在 一 起 。 


Var a = [1l,2,3]; 
3 = Gn (0 // s == "1,2,3" 
5 = qolmnt™ sn po :eb 


(2) reverse0， 将 Array 的 element 顺 数 颠 倒 。 


var aa = [1,2,3]; 
a.reverse(); 
号 = jon()s ed 


(3) sort0， 排 序 ， 默 认 按 字母 顺序 排序 case sensitive， 可 以 自 定义 排序 方式 。 


var a = [111,4,33,2]; 


a.sort(); // a == [111,2,33,4] 
a.sort (function(a,b) { // a == [2,4,33,111] 
return a-b; // Returns < 0, 0, or > 0 


Ds; 
(4) concat()， 连 接 多 个 Array。 


var a = [1,2,3]; 

a.concat (4,5); | 
a.concat ([4,5]); Ar return [lr2r3r4r5] 
a.concat([4rSlr [677]) i return [lr2r3r4r5r6r7] 
a.concat (4, [5, [6,7]]); // return [1,2,3,4,5,6,7] 


2. 在 JavaScript 中 ， 添 加 注释 有 哪些 功能 ? 

在 程序 中 ， 通 过 添加 注释 来 描述 代码 的 功能 ， 还 可 以 使 一 些 代码 无 效 ， 以 实现 逐 行 检 查 
程序 ， 及 时 发 现 并 解决 问题 。JavaScript 主 要 提供 了 三 种 注释 方法 : 

(1) 单行 注释 。 在 需要 注释 的 代码 前 添加 字符 “//”，“//” 后 面 的 部 分 会 被 注释 。 

(2) 多 行 注释 。 在 代码 前 添加 “/*”， 之 后 添加 “*/”， 星 号 之 间 的 部 分 会 被 注释 。 

(3) HTML 注 释 。 使 用 传统 的 HTML 注 释 ，<!-- 和 --> 之 间 的 部 分 会 被 注释 ， 注 释 内 容 可 
以 是 一 行 或 多 行 。 
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CSS3 与 XML 
的 综合 运用 


本 章 引言 


XML 是 一 种 标准 化 的 文本 格式 ， 可 以 在 Web 上 表示 结构 化 信 
息 ， 利 用 它 可 以 存储 有 复杂 结构 的 数据 信息 。XML 是 HTML 的 补 
充 ， 但 XML 并 不 是 HTML 的 蔡 代 品 。 在 将 来 的 网 页 开发 中 ，XML 将 
被 用 来 描述 、 存 储 数据 ， 而 HTML 则 是 用 来 格式 化 和 显示 数据 的 。 


【¢ OE } Bove em + 
Be 
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他 :1 ”XML 语法 基础 


XML 是 标记 语言 ， 可 支持 开发 者 为 Web 信 息 设计 自己 的 标记 。XML 要 比 HTML 强 大 得 
多 ， 它 不 再 是 固定 的 标记 ， 而 是 允许 定义 数量 不 限 的 标记 来 描述 文档 中 的 资料 ， 允 许 典 套 的 
信息 结构 。 


人 XML 概念 


随 着 Internet 的 发 展 ， 为 了 控制 网 页 显示 样式 ， 就 增加 了 一 些 描述 如 何 显现 数据 的 标记 ， 
例如 <center>、<b> 等 标记 。 但 随 着 HTML 的 不 断 发 展 ，W3C 组 织 意识 到 HTML 存 在 着 一 些 无 
法 避免 的 问题 : 


。 不 能 解决 所 有 解释 数据 的 问题 ， 例 如 影音 文件 或 化 学 公式 、 音 乐 符号 等 其 他 型 态 的 
内 容 。 

。 效能 问题 ， 需 要 下 载 整 份 文件 ， 才 能 开始 对 文件 做 搜寻 的 动作 。 

e 扩充 性 、 弹 性 、 易 读 性 均 不 佳 。 


为 了 解决 以 上 问题 ， 专 家 们 使 用 SGML 精 简 制 作 ， 并 依照 HTML 的 发 展 经 验 ， 产 生出 一 
套 上 规则 严谨 ， 但 是 使 用 简单 的 描述 数据 语言 : XML。 
XML (eXtensible Markup Language， 可 扩展 标记 语言 ) 是 W3C 推 荐 的 参考 通用 标记 语 
言 ， 同 样 也 是 SGML 的 子 类 ， 可 以 定义 自己 的 一 组 标记 。 它 具有 下 面 几 个 特点 : 


1) XML 是 一 种 元 标记 语言 ， 所 谓 “ 元 标记 语言 ”就 是 开发 者 可 以 根据 需要 定义 自己 的 标 
记 ， 例 如 开发 者 可 以 定义 标记 <book>、<name> 等 ， 任 何 满足 XML 命名 规则 的 名 称 都 可 以 作 
为 标记 ， 这 就 为 不 同 的 应 用 程序 的 应 用 打开 了 大 门 。 

2) 允许 通过 使 用 自 定 义 格式 、 标 识 ， 交 换 和 处 理 数据 库 可 以 理解 的 数据 。 

3) 基于 文本 的 格式 ， 允 许 开发 人 员 描 述 结 构 化 数据 并 在 各 种 应 用 之 间 发 送 和 交换 这 些 数据 。 
4) 有 助 于 在 服务 器 之 间 传输 结构 化 数据 。 

(5) XML 使 用 的 是 非 专 有 的 格式 ， 不 受 版 权 、 专 利 、 商 业 秘 密 或 是 其 他 种 类 的 知识 产权 的 
限制 。XML 的 功能 是 非常 强大 的 ， 同 时 对 于 人 类 或 是 计算 机 程序 来 说 ， 都 容易 阅读 和 编写 ， 
因而 成 为 交换 语言 的 首选 。 网 络 带 给 人 类 的 最 大 好 处 是 信息 共享 ， 在 不 同 的 计算 机 发 送 数 
据 ， 而 XML 是 用 来 告诉 我 们 “数据 是 什么 ”， 利 用 XML 可 以 在 网 络 上 交换 任何 一 种 信息 。 


【 例 17.1】 实 例文 件 ，ch17\17.1.xml 


<?xml version="1.0" encoding="GB2312" ?> 
< 电器 > 
< 家 用 电器 > 
< 品牌 > 小 天 鹅 洗 衣 机 </ 品 牌 > 
< 购买 时 间 >2009-10-01</ 购 买 时 间 > 
< 价格 币 种 =" 人 民 币 ">899 元 </ 价 格 > 


人 、s 通 DIV+CSS3 网 页 布局 与 样式 


</ 家 用 电器 > 
< 家 用 电器 > 
< 品牌 > 海尔 冰箱 </ 品 牌 > 
< 购买 时 间 >2011-08-16</ 购 买 时 间 > 
< 价格 币 种 =" 人 民 币 ">3990</ 价 格 > 
</ 家 用 电器 > 
</ 电 器 > 
此 处 需要 将 文件 保存 为 XML 文件 。 该 文件 中 ， 每 个 标记 都 是 用 汉语 编写 的 ， 是 自 定 义 标 
记 。 整 个 电器 可 以 看 作 是 一 个 对 象 ， 该 对 象 包含 多 个 家 用 电器 ， 家 用 电器 是 用 来 存储 电器 的 
相关 信息 的 ， 也 可 以 说 家 用 电器 对 象 是 一 种 数据 结构 模型 。 在 页 面 中 没有 对 那个 数据 的 样式 
进行 修饰 ， 而 只 告诉 我 们 数据 结构 是 什么 ， 数 据 是 什么 。 
在 IE9.0 中 浏览 效果 如 图 17-1 所 示 ， 可 以 看 到 整个 页 面 树 形 结构 显示 ， 通 过 单 击 “-” 可 以 
关闭 整个 树 形 结构 ， 单 击 “+” 可 以 展开 树 形 结构 。 


四 


Pam version="1.0" ancoding="G82312"7> 


~ 
< 品 良 > 小 天 了 衣 机 </ 呈 汐 > 


<< 队 时 月 >2009-10-01</ 罗 和 时 局 > 
< 俐 全 而 条 =" 人 民 而 ">899 元 </ 衣 从 > 
</ 原 再 吕 > 


</ 避 > 
< 和 时 月 > 2011-06-16</ 多 时 局 > 
< 价格 而 入 =* 人 民 而 ">3990</ 从 松 > 
/同和 六 > 
> 


图 17-1 XML 文件 显示 


XML 文 档 组 成 和 声明 


一 个 完整 的 XML 文 档 由 声明 、 元 素 、 注 释 、 字 符 引 用 和 处 理 指令 组 成 。 在 文档 中 ， 所 有 
这 些 XML 文 档 的 组 成 部 分 都 是 通过 元 素 标 记 来 指明 的 。 可 以 将 XML 文 档 分 为 三 个 部 分 ， 如 图 
17-2 所 示 。 


主体 < 公司 员工 > 
< 姓名 > 刘 红 震 </ 姓 名 > 
< 性 别 > 女 </ 性 


别 > 
< 出 生日 期 >19802.5</ 出 生日 期 > 
< 公司 员工 > 


图 17-2 XMI 文 档 组 成 
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XML 声明 必须 作为 XML 文档 的 第 一 行 ， 


声明 格式 如 下 : 


第 17 章 CSS3 与 XML 的 综合 运用 


前 面 不 能 有 空白 、 注 释 或 其 他 处 理 指令 。 完 整 的 


<?xm] version="1.0" encoding=" 编 码 " standalone="yes/no" ?> 


其 中 version 属 性 不 能 省 略 ， 且 在 属性 列表 中 必须 排 在 第 一 位 ， 指 明 所 采用 的 XML 的 版 本 
号 ， 值 为 1.0。 该 属性 用 来 保证 对 XML 未 来 版 本 的 支持 。encoding 属 性 是 可 选 属性 。 该 属性 指 


定 了 文档 采用 的 编码 方式 ， 即 规定 了 采用 哪 种 字符 集 对 XML 文档 进行 字符 编码 ， 常 用 的 编码 
方式 为 UTF-8 和 GB2312。 如 果 没 有 使 用 encoding 属 性 ， 那 么 该 属性 的 默认 值 是 UTF-8; 如 果 
encoding 属 性 值 设 置 为 GB2312， 则 文档 必须 使 用 ANSI 编 码 保存 ， 文 档 的 标记 以 及 标记 内 容 只 


可 以 使 用 ASCI 字 符 和 中 文 。 
使 用 GB2312 编 码 的 XML 声明 如 下 ; 


<?xml Version="1.0" encoding="GB2312" ?> 


XML 文档 主体 必须 有 根 元 素 ， 所 有 的 XML 必须 包含 可 定义 根 元素 的 单一 标记 对 ， 所 有 
其 他 的 元 素 都 必须 处 在 这 个 根 元 素 内 部 。 所 有 的 元 素 均 可 拥有 子 元 素 ， 子 元 素 必 须 被 正确 地 
典 套 在 它们 的 父 元 素 内 部 。 根 标记 以 及 根 标记 内 容 共同 构成 XML 文档 主体 ， 没 有 文档 主体 的 
XML 文档 将 不 会 被 浏览 器 或 其 他 XML 处 理 程序 识别 。 

注释 可 以 提高 文档 的 阅读 性 ， 尽 管 XML 解析 器 通常 会 忽略 文档 中 的 注释 ， 但 位 置 适 当 且 
有 意义 的 注释 可 以 大 大 提高 文档 的 可 读 性 ， 所 以 XML 文档 中 不 用 于 描述 数据 的 内 容 都 可 以 包 
含 在 注释 中 。 注 释 以 “<!--” 开 始 ， 以 “-->” 结 束 ， 在 起 始 符 和 结束 符 之 间 的 内 容 为 注释 内 
容 ， 注 释 内 容 可 以 输入 符合 注释 规则 的 任何 字符 串 。 


【 例 17.2】 实 例文 件 : ch17\17.2.xml 


<?xml Version="1.0" encoding="gb2312"?> 


<!-- 这 是 一 个 优秀 学 生 名 单 --> 
< 学 生 名 单 > 
< 学 生 > 
< 姓名 > 刘海 松 </ 姓 名 > 
< 学 号 >21</ 学 号 > 
< 性 别 > 男 </ 性 别 > 
</ 学 生 > 
< 学 生 > 
< 姓名 > 刘 红 起 </ 姓 名 > 
< 学 号 >22</ 学 号 > 
< 性 别 > 女 </ 性 别 > 
</ 学 生 > 
</ 学 生 名 单 > 


上 面 代码 中 ， 第 一 句 代 码 是 一 个 XML 声明 。“< 学 生 >” 标 记 是 “< 学 生 名 单 >” 标 记 的 
子 元 素 ， 而 “< 姓名 >” 标 记 和 “< 学 号 >” 标 记 是 “< 学 生 >” 的 子 元 素 。“<!---->” 是 一 个 


注释 。 


在 IE9.0 中 浏览 效果 如 图 17-3 所 示 ， 可 以 看 到 页 面 显示 了 一 个 树 形 结构 ， 并 且 数 据 层次 感 


非常 好 。 
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< 学生 名 单一 


< 学 生 > 
< 考 名 > 刘海 松 </ 大 名 > 
一 学 号 >21</ 学 号 > 
性别 > 男 </ 性 别 > 

</ 学 生 > 


- < 字 生 > 
一 注 名 ~> 刘 红 配 </ 臣 名 > 


图 17-3 XML 文档 组 成 


人 LEN XML 元 素 介绍 


元 素 是 以 树 形 分 层 结构 排列 的 ， 它 可 以 嵌 套 在 其 他 元 素 中 。 


1. 元 素 类 别 
在 XML 文档 中 


， 元 素 也 分 为 非 空 元 素 和 空 元 素 两 种 类 型 。 一 个 XML 非 空 元 素 是 由 开始 标 


记 、 结 束 标记 以 及 标记 之 间 的 数据 构成 的 。 开 始 标记 和 结束 标记 用 来 描述 标记 之 间 的 数据 ， 
标记 之 间 的 数据 被 认为 是 元 素 的 值 。 非 空 元 素 的 语法 结构 如 下 : 


< 开始 标记 > 文本 


内 容 </ 结 束 标记 > 


而 空 元 素 就 是 不 包含 任何 内 容 的 元 素 ， 即 开始 标记 和 结束 标记 之 间 没 有 任何 内 容 的 元 
素 。 其 语法 结构 如 下 : 


< 开始 标记 ></ 结 束 标记 > 
可 以 把 元 素 内 容 为 文本 的 非 空 元 素 转换 为 空 元 素 。 例 如 ， 


<hel1o> 下 午 好 </hello> 

<hello> 是 一 个 非 空 元 素 ， 如 果 把 非 空 元 素 的 文本 内 容 转换 为 空 元 素 的 属性 ， 那 么 转换 后 
的 空 元 素 可 以 写 为 : 

<hello content=" 下 午 好 "></hello> 

2. 元 素 命名 规范 

XML 元 素 命 名 规则 与 Java、C 等 命名 规则 类 似 ， 它 也 是 一 种 对 大 小 写 敏感 的 语言 。XML 


元 素 命名 必须 遵守 下 列 规则 : 
(1) 元 素 名 中 可 以 包含 字母 、 数 字 和 其 他 字符 ， 如 <place>、< 地 点 >、<no123> 等 。 元 素 


名 中 虽然 可 以 包含 


b 文 ， 但 是 在 不 支持 中 文 的 环境 中 将 不 能 够 解释 包含 中 文字 符 的 XML 文档 。 


(2) 元 素 名 中 不 能 以 数字 或 标点 符号 开头 。 例 如 <123no>、<.name>、<?error> 元 素 名 称 


都 是 非法 名 称 。 


(3) 元 素 名 中 不 能 包含 空格 ， 如 <no 123> 是 非法 名 称 。 
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3. 元 素 嵌 套 
元 素 的 内 容 可 以 包含 子 元 素 。 子 元 素 本 身 也 是 元 素 ， 被 能 套 在 上 层 元 素 之 内 。 如 果子 元 
素 肉 套 了 其 他 元 素 ， 那 么 它 同时 也 是 父 元 素 ， 例 如 下 面 所 示 部 分 代码 : 


<?xml Version="1.0"” encoding="gb2312" ?> 
<students> 
<student> 
<name> 张 三 </name> 
<age>20</age> 
</student> 


</students> 
<student> 是 <students> 的 子 元 素 ， 同 时 也 是 <name> 和 <age> 的 父 元 素 ， 而 <name> 和 <age> 
是 <student> 的 子 元 素 。 


4. 元 素 实例 
【 例 17.3】 实 例文 件 : ch17\17.3.xml 


<?xml Version="1.0" encoding="gb2312" ?> 
< 通讯 录 > 
<!--" 记 录 " 标 记 中 包含 姓名 、 地 址 、 电 话 和 电子 邮件 --> 
< 记录 date="2011/2/1"> 
< 姓名 > 刘海 松 </ 姓 名 > 
< 地 址 > 河南 省 郑州 市 中 州 大 道 </ 地 址 > 
< 电话 >0371-12345678</ 电 话 > 
< 电子 邮件 >evanetom. com</ 电 子 邮 件 > 
</ 记 录 > 
< 记录 date="2011/3/12"> 
< 姓名 > 刘 红 霞 </ 姓 名 > 
< 地 址 > 河北 省 邯郸 市 工农 大 道 2 号 </ 地 址 > 
< 电话 >83365354</ 电 话 > 
</ 记 录 > 
< 记录 date="2011/6/23"> 
< 姓名 > 闫 阳 </ 姓 名 > 
< 地 址 > 吉林 省 长 春 市 幸福 路 6 号 </ 地 址 > 
< 电话 >0431-8365257</ 电 话 > 
电子 邮件 >yanyang@sina .com</ 电 子 邮 件 > 
</ 记 录 > 
</ 通 讯 录 > 


文件 代码 中 ， 第 一 行 是 XML 声明 ， 它 声明 该 文档 是 XML 文档 ， 文 档 所 采用 的 版 本 号 
以 及 文档 使 用 的 字符 编码 集 。 在 这 个 例子 中 ， 遵 守 的 是 XML 1.0 版 本 规范 ， 字 符 编码 是 
GB2312 编 码 方式 。< 记 录 > 是 < 通讯 录 > 的 子 标记 ， 但 < 记录 > 标记 同时 是 < 姓名 > 和 < 地 址 > 等 标 
记 的 父 元 素 。 

在 IE9.0 中 浏览 效果 如 图 17-4 所 示 ， 可 以 看 到 页 面 显示 了 一 个 树 形 结构 ， 每 个 标记 中 间 包 
含 相应 的 数据 。 
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QQ、 wmis DIV+CSS3 网 页 布局 与 样式 


<?xml version="1.0" encoding="GB2312"?> 
- < 通讯 录 > 


好 "标记 中 包 评 姓名 


- < 记录 date="2011/2/1"> 
< 此 名 > 间 


刘海 检 </ 姓 乌 > 
= 地 址 = 河南 便 郑州 市 中 州 大 道 =/ 培 址 > 
< 电话 >0371-12345678</ 所 话 > 
< 电子 邮件 >evan@tom.com</ 所 子 邮件 > 
</ 记 录 > 
< 记录 date="2011/3/12"> 
> 
> 工农 大 道 2 号 </ 地 址 > 
< 电话 >83365354</ 电 话 > 
</ 记 录 > 
- < 记录 date="2011/6/23"> 
< 站 名 > 目 阳 </ 姓 名 > 
所 址 > 吉林 省 长 春 市 六 所 路 6 号 /地址 > 
< 电话 >0431-8365257</ 电 话 > 
< 电子 部 件 >yanyang@sina.com< /电子 邮件 > 
</ 记 录 > 
</ 通 讯 录 > 


则 


17-4 元 和 又 包含 


亿 2 CSS 修 饰 XML 文 件 


我 们 知道 ，XML 文 档 本 身 只 包含 数据 ， 而 没有 关于 显示 数据 样式 的 信息 。 如 果 需 要 将 
XML 文 档 数据 美观 的 显示 出 来 ， 而 不 是 以 树 形 结构 显示 ， 则 可 以 通过 CSS 来 控制 XML 文 档 中 
各 个 元 素 的 呈现 方式 。 


EN XML 使 用 CSS 


XML 文档 数据 需要 使 用 CSS 属 性 定义 显示 样式 ， 其 方法 是 把 CSS 代 码 做 成 独立 文件 ， 然 
后 引入 到 XML 中 。 在 XML 文档 引入 样式 表 CSS， 可 以 将 数据 的 内 容 和 表示 分 离 出 来 ， 并 且 能 
够 实现 CSS 的 重复 使 用 。 

XML 文档 中 引用 CSS 文 件 ， 在 XML 文件 中 必须 使 用 下 面 的 操作 指令 : 

<?xml-stylesheet href="URI" type="text/css"?> 

xml-stylesheet 表 示 在 这 里 使 用 了 样式 表 。 样 式 表 的 URI 是 表示 要 引入 文件 所 在 的 路 径 ， 
如 果 只 是 一 个 文件 的 名 字 ， 该 CSS 文 件 必须 和 XML 文 档 同 在 一 个 目录 的 下 面 ， 如 果 URI 是 一 
个 链接 ， 该 链接 必须 是 有 效 的 和 可 访问 的 。type 表 示 该 文件 所 属 的 类 型 是 文本 形式 ， 其 内 容 
是 CSS 代 码 。 

【 例 17.4】 实 例文 件 : ch17\17.4.xml 


<?xml] version="1.0" encoding="GB2312" ?> 
<?xml-stylesheet type="text/css" href="17.4.css"?> 
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<student> 
<name> 孙 福全 </name> 
<sex> 男 </sex> 
<name> 王 小 玲 </name> 
<sex> 女 </sex> 
</student> 


实例 文件 : ch17\17.4.css 


student{ 

background-color: #ddeecc; 
font-family:" 幼 圆 "; 
text-align:center; 
display:block; 

上 

name{ 
font-size:20px; 
color:red; 

' 

sext{ 
font-size:12px; 
font-style:italic; 
} 


在 CSS 文 件 中 ， 针 对 student、name 和 sex 3 个 标记 ， 设 置 了 不 同 的 显示 样式 ， 例 如 字体 大 
小 、 字 体 颜 色 、 对 齐 方式 等 。 

在 IE9.0 中 ， 浏 览 效果 如 图 17-5 所 示 ， 可 以 看 到 XML 文 档 不 再 是 以 树 形 结构 显示 ， 并 且 没 
有 标记 出 现 ， 而 只 是 显示 其 标记 中 的 数据 。 


| 


图 17-5 XML 引入 CSS 文 件 


人 EM 设置 字体 属性 


CSS3 样 式 表 提 供 了 多 种 字体 属性 ， 使 设计 者 对 字体 有 更 详细 的 设置 ， 从 而 能 够 使 页 面 效 
果 更 加 丰富 。 例 如 font-style、font-variant、font-weight、font-size 和 font-family 等 属性 ， 这 些 属 
性 前 面 已 经 介绍 过 ， 就 不 再 重复 了 。 这 些 字体 属性 ， 同 样 可 以 应 用 于 XML 文件 元 素 。 


【 例 17.5】 实 例文 件 : ch17\17.5.xml 


<?xml] version="1.0" encoding="GB2312"?> 
<?xml-stylesheet href="17.5.css" type="text/css"?> 
<company> 

<name> 水 月 网 页 设计 工作 室 </name> 

<address> 郑 州 市 花园 路 松 风 大 夏 </address> 
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@ ma DIV+CSS3 网 页 布局 5 样式 


<phone>13012345678</phone> 
</company> 


实例 文件 : ch17\17.5.css 


company{ 
color: #ddeecc; 


font:normal small-caps bolder 


name{ 
font-size:30px; 


display:block; 
address{ 
font-size: 12px; 
display:block; 
phonef{ 
font-size: 12px; 


font-style:italic; 
display:block; 


在 IE9.0 中 
大 小 不 一 样 ， 


， 浏 览 效 果 如 图 
联系 方式 以 斜体 显示 。 


background-color: 


在 上 面 的 CSS 代 码 中 ， 针 对 XML 中 的 标记 ， 进 行 了 字体 、 
17-6 所 示 ， 可 以 看 到 网 页 显示 了 一 个 公 


当 De 源 代码 khi77Ssml P+ OX 


€) 3 
水 月 网 页 设计 工作 室 
er 


15pt " 幼 圆 "”; 
#123543 


时 
月 未 


颜色 和 前 景色 设置 。 
司 介绍 信息 ， 其 中 字体 


[mel] 


eT] 


人 ER 设置 色彩 属性 


颜色 和 背景 是 网 页 设计 时 两 个 重要 的 


在 CSS3 中 ， 如 果 需 要 设置 文本 颜色 ， 
背景 ， 其 相关 属性 分 别 如 下 : 


background-attachment、 


【 例 17.6】 实 例文 件 : ch17\17.6.xml 


17-6 CSS 定 义 XML 字 体 属性 


吸引 不 少 的 访问 者 。CSS 的 强大 表现 功能 在 控制 XML 元 素 的 颜色 和 
尽 致 。XML 元素 的 背景 可 设置 成 一 种 颜色 或 一 幅 影 


background-position 。 


因素 ， 一 个 颜色 搭配 协调 、 背 景 优美 的 文档 总 是 能 
背景 方面 同样 发 挥 得 淋漓 


属性 ， 定 义 元 素 


color 


即 网 页 前 景色 ， 通常 使 


background- polor: background-image、 oases ah 


这 些 前 面 都 已 经 介绍 过 ， 


里 就 不 再 介绍 了 。 


<?xml version="1.0" encoding="GB2312" ?> 
<?xml-stylesheet href="17.6.css" type="text/css" ?> 


402 


第 17 章 CSS3 与 XML 的 综合 运用 


<img> 
插花 


</img> 
实例 文件 : ch17\17.6.css 


img{ 
display:block; 
color:red; 
text-align:center; 
font-size:40px; 
left:50px; 
top:170px; 
background-image:URL("08.jpg"); 
background-repeat:no-repeat; 
background-position:left; 


E 


上 面 CSS 代 码 设置 背景 以 块 显示 ， 字 体 颜 色 为 红色 ， 字 体 大 小 为 40px 并 居中 显示 。 
background-image 引 入 背景 图 片 为 08jpg， 并 设置 了 图 片 不 重复 。 

在 IE9.0 中 ， 浏 览 效果 如 图 17-7 所 示 ， 可 以 看 到 页 面 背景 为 一 张 图 片 ， 且 不 重复 ， 在 图 片 
上 显示 了 “插花 ”两 个 红色 字体 。 


图 17-7 CSS 定 义 XML 背 景 


.EE 设置 边框 属性 


在 CSS3 中 ， 可 以 使 用 border-style、border-width 和 border-color 这 3 个 属性 设 定 边 框 。 页 面 
元 素 的 边框 就 是 将 元 素 内 容 及 间隙 包含 在 其 中 的 边线 ， 类 似 于 表格 的 外 边线 。 页 面 元 素 边框 
通过 三 个 方面 来 描述 : 宽度、 样式 和 颜色 ， 这 三 个 方面 决定 了 边框 显示 出 来 的 外 观 。 

【 例 17.7】 实 例文 件 : ch17\17.7.xml 


<?xml version="1.0" encoding="GB2312" ?> 
<?xml-stylesheet href="17.7.css" type="text/css" ?> 
<border> 
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人 pm 通 DIV+CSS3 网 页 布局 与 样 式 


<smallBorder> 
学 校 雷锋 好 榜样 
</smallBorder> 
</border> 


实例 文件 : ch17\17.7.css 


border{ 
border-style:solid; 
border-width:15px; 
border-color:#123456; 
width:200px; 
height:150px; 
text-align:center; 
k 
smallborder{ 
font-size:20px; 
color:red; 


. 


在 border 标 记 中 ， 设 置 边框 显示 样式 ， 例 如 直线 显示 ， 颜 色 为 深蓝 色 ， 宽 度 为 15px， 并 
且 设 置 显示 块 的 宽度 为 200px， 高 度 为 130px， 边 框 内 元 素 居 中 显示 。 在 smallborder 标 记 中 设 
置 了 字体 大 小 和 字体 颜色 。 

在 IE9.0 中 ， 浏 览 效 果 如 图 17-8 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 边框 ， 边 框 中 显示 的 是 
红色 字体 ， 其 内 容 是 “学 习 雷 锋 好 榜样 ”。 


CPO vn oS 


学 习 雷 锋 好 榜样 


图 17-8 设置 XML 元 又 边 框 


G8 设置 文本 属性 


在 CSS3 中 ， 提 供 多 种 文本 属性 来 实现 对 文本 的 控制 ， 例 如 text-indent、text-align、white- 
space、line-height、vertical-align、text-transform 和 和 text-decoration 等 属性 。 这 些 属性 前 面 已 经 
介绍 过 ， 这 里 就 不 再 介绍 了 。 利 用 上 面 这 些 属性 ， 可 以 控制 XML 元 素 的 显示 样式 。 

【 例 17.8】 实 例文 件 : ch17\17.8.xml 


<?xml] version="1.0" encoding="gb2312"?> 


<?xml-stylesheet type="text/css" href="17.8.css"?> 
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<big> 
<one> 健 康 </one> 

<two> 

<title> 饮 茶 养 生养 颜 特殊 时 期 慎 饮 茶 </title> 

<content> 

金银花 ， 味 甘 ， 性 寒 ， 具 有 清热 解毒 、 疏 散 风 热 的 作用 。 金 银 花 为 清热 解毒 之 良药 ， 既 能 清 里 热 ， 
又 能 散 表 热 ， 临 床上 主要 用 于 治疗 各 种 痛 肿 疮 毒 、 热 毒 血 痢 及 温 热 病 等 。 金 银 花药 性 偏 寒 ， 不 适合 长 期 饮 
用 ， 仅 适合 在 炎热 的 夏季 和 暂时 饮用 以 防治 痢疾 。 

</content> 

</two> 

</big> 


实例 文件 : ch17\17.8.css 


big{ 
width:500px; 
border:#6600FF lpx solid; 
height:200px; 
font-size:12px; 
font-family:" 幼 圆 "; 


} 

onel{ 
font-size:18px; 
width:500px; 
height:25px; 
line-height:25px; 
text-align:center; 
color:#FF3300; 
margin-top:S5px; 
font-weight:800; 

text-decoration:underline; 

} 

EE 
margin:l0px 0 1l0px 1l0px; 
display:block; 
Color:#0033FF; 
font-size:14px; 
font-weight:800; 

text-align:center; 
} 

content{ 
display:block; 
line-height:20px; 
width:490px; 
margin-left:10px; 
font-weight:800; 
text-indent:2em; 


} 


上 面 CSS 代 码 分 别 定义 不 同 标记 的 显示 样式 ， 例 如 宽度 、 高 度 、 边 框 样式 、 字 体 大 小 、 
行 高 和 是 否 带 有 下 划 线 等 。 
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人 pm 通 DIV+CSS3 网 页 布局 样式 


了 不 同 颜色 的 字体 ， 并 且 段 落 缩 进 两 个 单元 格 显示 。 


才 荣 养生 养颜 特殊 时 期 和 羽 茶 


他 论 ， 味 里 ， 性 守 ， 有 具有 青 雪 媚 奏 、 焉 各 风 热 的 作用 。 全 技 花 为 寺 扫 六 志 之 良药 ,， 
衣 青 里 热 ， 只 能 获 志 热 ， 临 床上 主要 用 于 治疗 各 种 病 肿 桔 志 、 热 考 血 阐 玉 瘟 扫 病 等 = 


17-9 修饰 XML 文本 


ee 


又 如 下 所 示 。 
四 分 析 需 求 。 


样式 设计 。 实 例 效果 如 图 17-10 所 示 。 


刀 有 由 广 圭 
招聘 广 所 

因 公司 发 展 东 要 ， 现 该 聘 软件 
工程 师 3 名 。 要 求 : 具有 Java 基 


础 ， 了 解 软件 设计 模式 ， 熟 绕 萤 握 
Eclipse 工 具 使 用 


配属 方式 :75012945675 


图 17-10 招聘 显示 


加 构建 XML 文档 。 


<?xml] Version="1.0"” encoding="GB2312" ?2> 


在 IE9.0 中 ， 浏 览 效 果 如 图 17-9 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 公告 栏 ， 公 告 栏 中 显示 


位 :3 实例 1: 招聘 广告 


CSS3 结 合 XML 文 档 ， 可 以 创建 出 多 种 多 样 的 样式 ， 例 如 在 HTML 页 面 中 常见 的 招聘 信 


FXML 文 档 的 招聘 广告 。 具 体 步 


息 。 本 实例 将 结合 前 面 学 习 的 XML 和 CSS 知 识 ， 创 建 一 个 基于 


<?xml-stylesheet href="17.9.css" type="text/css" ? 


创建 一 个 招聘 广告 ， 就 文件 而 言 包括 两 大 部 分 ， 一 个 是 XML 文 档 ， 另 一 个 是 CSS 文 件 。 
XML 文档 需要 包含 招聘 标题 、 招 聘 内 容 和 联系 方式 ， 而 CSS 文 件 需要 针对 XML 文档 标记 进行 
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<zhaopin> 
<title> 
招聘 广告 
</title> 
<content> 
因 公司 发 展 需 要 ， 现 诚 聘 软 件 工程 师 3 名 。 
要 求 : 具有 Java 基 础 ， 了 解 软件 设计 模式 ， 熟 练 掌握 Eclipse 工具 使 用 。 
</content> 
<address> 
联系 方式 :13012345678 
</address> 
</zhaopin> 


在 XMI 文 件 中 ， 有 一 个 根 标 记 <zhaopin>， 下 面包 含 了 三 个 子 标记 ， 分 别 为 <title> 标 记 、 
<content> 标 记 和 <address> 标 记 。 标 记 中 分 别 存放 着 相应 的 数据 。 

在 IE9.0 中 ， 浏 览 效 果 如 图 17-11 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 树 形 结构 ， 其 元 素 中 
包含 不 同 的 信息 。 

添加 CSS 样 式 文件 ， 修 饰 整体 样式 。 


zhaopin{ 
display:block; 
position:absolute; 
top:50px; 
left:50px; 
width:300px; 
height:300px; 
border:2px #ddeecc solid; 
text-align:center; 


} 

上 面 代 码 定义 了 zhaopin 元 素 以 块 形式 显示 ， 绝 对 定位 ， 坐 标 为 〈50,.50) ， 高 度 和 宽度 都 
是 300px。 

在 IE9.0 中 ， 浏 览 效果 如 图 17-12 所 示 ， 可 以 看 到 页 面 不 再 以 树 形 结构 显示 ， 而 是 显示 了 
一 个 边框 ， 边 框 内 显示 的 是 XML 文档 的 数据 。 


招聘 广 告 因 公司 ， 现 谍 聘 软件 工 
. ER 
设计 模式 ， pse 工 具 使 用 。 
联系 方式 :13012345678 


ars EEC 区 RE 


="GB2312"?> 


> 国 要 ， 观 话 了 软件 工程 师 3 名 。 要求 : 具有 Java 芭 碟 。 了解 舱 件 设 
计 醒 式 ， 热 组 守 丛 Eclipse 工具 启用。 </content> 
<address> 联系 方式 :13012345678 </address> 
</zhaopin> 


图 17-11 XML 文档 显示 图 17-12 定义 边框 样式 


添加 CSS 样 式 ， 修 饰 标题 、 内 容 和 地 址 信息 。 
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@、 wma DIV+CSS3 网 布局 与 样式 


titlef 


font-family: 黑 体 ; 
font-varanit:normal; 


font-size:50px; 


color:red; 
} 
content{ 


display:block; 
font-family:" 幼 圆 "; 
font-varanit:normal; 
font-size:20px; 


color:blue 


text-indent:2em; 
line-height:35px; 


} 


address{ 


position:absolute; 


left:100px; 
top:260px; 


text-align:right; 
font-style:italic; 


} 
在 CSS 文 件 中 ,和 


计 对 上 面 不 同 的 标记 ， 设 置 相 应 的 样式 ， 例 如 修饰 字体 、 定 位 和 块 的 大 小 。 


在 IE9.0 中 浏览 效果 如 图 17-10 所 示 ， 可 以 看 到 页 面 边框 内 ， 标 题 以 红色 字体 显示 ， 正 文 


以 蓝 色 字体 显示 ， 联 


系 方式 以 斜体 显示 。 


他 :4 ”实例 2: 书目 清音 


在 网 页 中 ， 使 


表格 显示 数据 是 最 常见 的 一 种 方式 。 本 实例 将 使 用 ML 和 CSS 模 拟 表格 


效果 ， 即 创建 一 个 书 


清单 ， 具 体 步 骤 如 下 所 示 。 


分 析 需 求 。 


创建 一 个 具有 表格 效果 的 页 面 ， 就 是 利用 元 素 的 边框 效果 完成 的 。 针 对 XML 标记 设 定 一 


个 边框 效果 ， 相 近 的 


边框 重 双 就 可 以 了 。 实 例 完成 后 效果 如 图 17-13 所 示 。 
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= SS 


¢ ET 
作者 出 版 社 页 数 


C55 或 坟 刘海 松 人 民 邮 电 出 版 社 39. 5 元 
KUL 笑 和 王 伟 河南 出 版 社 33. 5 元 


图 17-13 模拟 表格 效果 


加 创建 XMI 文 档 。 


<?xml version="].0" encoding="GB2312"?> 
<?xml-stylesheet type="text/css" href="17.10.css"?> 
<inventory> 
<image></image> 
<book> 
<title> 标 题 </title> 
<author> 作 者 </author> 
<binding> 出 版 社 </binding> 
<pages> 页 数 </pages> 
<price> 价 格 </price> 
</book> <book> 
<title>java 入 门 </title> 
<author> 李 张力 </author> 
<binding> 清 华 大 学 出 版 社 </binding> 
<price>25 元 </price> 
</book> <book> 
<title>css 设 计 </title> 
<author> 刘 海松 </author> 
<binding> 人 民 邮 电 出 版 社 </binding> 
<price>39.5 元 </price> 
</book> <book> 
<title>xml 实 例 </title> 
<author> 王 伟 </author> 
<binding> 河 南 出 版 社 </binding> 
<price>33.5 元 </price> 
</book> 
</inventory> 


在 XML 文 件 中 的 第 二 行 ， 使 用 xml-stylesheet 标 记 将 CSS 文 件 引 入 到 XML 文 件 中 ， 下 面 创 


建 了 一 个 book 标 记 及 其 子 标记 title、author、price 等 。 每 个 标记 都 包含 不 同 的 数据 。 
在 IE9.0 中 浏览 效果 如 图 17-14 所 示 ， 可 以 看 到 页 面 以 属性 结构 显示 XML 文 件 。 
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人 4 全 EEC 


<?xml version="1.0" encoding="GB2312"?> 
- <INVENTORY> 
<image/> 
<BOOK> 
<TITLE> 标 要 </TITLE> 
<auTHOR> 作 者 </AuUTHOR> 
<BINDING> 哇 版 社 </BINDING> 
<PAGES> 页 数 </PAGES> 
<PRICE> 价 格 </PRICE> 
</BooK> 
<BOOK> 
<TITLE>IavaA 门 </TITLE> 
<AUTHOR> 李 张力 </AUTHOR> 
<BINDING> 博 华 大 学 出 版 社 </BINDING> 
<PRICE>25 元 </PRICE> 
</BoOK> 
<BOOK> 
<TITLE>CSS 设 计 </TITLE> 
<AUTHOR> 刘 星 失 </aUTHOR> 
<BINDING> 人民 二 到 出 碑 竹 </BINDING> 
<PRICE>39.5 元 </PRICE> 
/BoaKs 
- <Book> 
<TITLE>XML 实 例 </TITLE> 
<AUTHOR> 王 化 </AUTHOR> 
<BINDING> 潭 两 出 版 社 </BINDING> 
<PRICE>33.5 元 </PRICE> 
</JBOOK> 
</INVENTORY> 


图 17-14 图 书目 录 显 示 


创建 CSS 文 件 ， 修 饰 指 定 元 素 。 


book{ 
display:block; 
font-size:20px; 
text-align:left; 
border-style:ridge; 
color:black; 
width:420px; 
height:50px; 
} 
titlef{ 
font-style:italic; 
color:#009900; 
} 
author{ 
font-weight:bold; 
Color:BLUE; 
} 
binding{ 
font-weight:bold; 
Color:GREEN; 
} 
price{ 
font-weight:bold; 
color:#000099; 
text-align: left; 
font-weight: bold; 
text-decoration:underline; 
} 
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从 代码 中 ， 可 以 看 出 针对 XML 文件 里 的 标记 ， 定 义 了 不 同 的 样式 。 其 思路 为 先 定 义 book 
标记 样式 ， 然 后 再 定义 其 子 标记 样式 。 

在 IE9.0 中 浏览 效果 如 图 17-13 所 示 ， 可 以 看 到 页 面 中 以 表格 方式 显示 不 同 的 数据 ， 其 数 
据 以 不 同 的 颜色 分 开 。 


fe 
# 


人 :5 ”实例 3: 图 文 混 排 页 面 


图 文 搭配 布局 是 显示 的 永恒 话题 ， 文 字 进行 介绍 ， 图 形 进行 说 明 二 者 相得益彰 、 互 为 补 
充 。 本 实例 使 用 XML 文档 结合 CSS 文 件 完成 图 文 混搭 的 布局 ， 具 体 步骤 如 下 所 示 。 

四 分 析 需 求 。 

将 图 形 和 文字 放 在 一 起 进行 布局 ， 需 要 将 图 形 放 在 一 个 指定 位 置 显示 ， 最 好 定义 其 显示 
大 小 ， 文 字 可 以 环绕 图 片 ， 也 可 以 放 在 一 侧 显示 。 实 例 完成 后 ， 效 果 如 图 17-15 所 示 。 


图 17-15 图 文 混 排 


思 构建 XMI 文 档 。 


<?xml] version="1.0" encoding="GB2312"?> 
<?xml-stylesheet type="text/css" href="17.11.css"2?> 
<xinwen> 
<content> 
<right> 
<img></img> 
九 典 寿 星 口服 液 三 大 服务 保 长 帮 
<br /> 
专家 : 立秋 进补 应 适度 缺 啥 补 啥 最 重要 
<br /> 
养生 : 起 床 后 5 个 坏 现象 说 明 你 越 来 越 老 
<br/> 
</right> 
-国内 | 猪肉 价格 连续 两 周 出 现下 跌 媒体 称 是 “ 假 摔 ” 
<br /> 
-财经 | 沪指 午 盘 跌 近 百 点 挫 3.68% 大 盘 跌 回 一 年 前 


<br /> 
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-互联 网 | 网 络 借贷 平台 频 现 危机 


<br /> 


“体育 1 世界 女排 大 奖 赛 首 站 中 国 队 一 胜 二 负 列 第 三 


<br /> 


“娱乐 | 打工 妹 卖房 拍 电影 自己 当主 角 遭 亲友 泼冷水 (图 ) 


<br /> 


“女人 | 阻击 紫外 线 彻 查 身体 防晒 死角 
</content> 
</xinwen> 


在 XML 文 件 中 ， 首 先 定义 了 根 标记 Xinwen， 然 后 定义 了 content 标 记 ，content 标 记 中 包含 
了 right、img 和 和 br 标记 。 

在 IE9.0 中 浏览 效果 如 图 17-16 所 示 ， 可 以 看 到 页 面 中 显示 了 一 个 树 形 结构 ， 其 元 素 中 包 
含 了 不 同 的 文本 数据 。 


DB | om chiNL7.1Leml Pp- ox| sovsravdiv7l x 


<?xml version="1.0" encoding="GB2312"?> 
- <xinwen> 
~ <content> 
- <right> 
<img/> 
九 奥 青 星 口服 到 三 大 服务 保 长 寿 


<br/> 
专家 : 立秋 再 补 应 适度 获 瞪 补 喘 最 重要 


<br/> 
养生 : 起 床 后 5 个 坏 现象 商 明 你 亲 来 钙 老 
<br/> 

</right> 

“国内 | 挤 肉 价格 连 综 两 周 出 现下 跃 吝 体 浆 是 " 仍 排 ” 


和 .68% 大 和 下 日 -生前 
总 各 1 网络 人 关中 台 有 外 机 

各 和 | 公办 女 拓 大 光洁 中 国 了 一 有 二 负 到 和 三 
6 电 昌 自己 主角 洒水 加 ) 
从 孜 机 和 引线 全身 人 风量 


</content> 
</xinwen> 


图 17-16 图 文 混 排 树 形 结构 


添加 CSS 样 式 ， 修 饰 xinwen、br 和 content 元 素 。 


xinwent{ 
width:400px; 
font-size:12px; 
font-family: "宋体 "; 
margin:0 auto 0 auto; 
} 

br{ 
display:block; 
} 

content{ 

width:350px; 

border:#CC6600 lpx solid; 
float:left; 
line-height:25px; 
margin-left:10px; 
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background-color:#ddeecc; 
| 
在 CSS 文 件 中 ， 创 建 了 不 同 标记 选择 器 ， 针 对 XML 文 档 标记 进行 修饰 。 基 本 都 是 设置 字 
体 、 边 框 、 定 位 和 背景 属性 。 需 要 说 的 是 ， 由 于 使 用 了 XML 文档 ， 所 有 <br> 标 记 不 能 像 在 
HIML 里 那样 实现 换行 的 效果 ， 这 里 需要 为 br 定义 CSS 样 式 ， 才 能 实现 正文 里 的 换行 效果 。 
在 IE9.0 中 浏览 效果 如 图 17-17 所 示 ， 可 以 看 到 页 面 中 显示 了 黄色 边框 ， 边 框 内 显示 了 相 
关 列 表 信息 。 


园 添加 CSS 样 式 ， 修 饰 img 和 right 元 素 。 


img{ 
width:115px; 
height:70px; 
background-image:url (003.jpg); 
float:left; 
margin:5px 0 0 Spx; 
3 
right{ 
border-bottom:#999999 dotted 2px; 
} 


上 面 的 CSS 代 码 ， 定 义 了 img 元 素 显示 样式 ， 例 如 宽度 、 高 度 、 背 景 图 片 、 左 浮动 和 外 边 


距 距离 等 。 
在 下 9.0 中 ， 浏 览 效 果 如 图 17-15 所 示 ， 可 以 看 到 页 面 边框 内 显示 了 一 张 图 片 。 


-一 


HA 


亿 .6 实例 4: 古诗 欣赏 


在 一 些 古典 风格 的 网 站 中 ， 往 往 有 很 多 漂亮 的 古诗 页 面 ， 用 来 展现 诗歌 。 本 实例 将 模拟 
这 种 效果 ， 具 体 步骤 如 下 所 示 。 

分 析 需 求 。 

如 果 要 对 古诗 内 容 进行 展示 ， 需 要 通过 绝对 定位 的 方法 ， 为 XML 文档 的 段落 文字 排版。 
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同样 也 可 以 导入 一 个 漂亮 的 背景 ， 配 合 文字 展示 。 实 例 完 成 后 效果 如 图 17-18 所 示 。 
创建 XMI 文档 。 


<?xml version="1.0" encoding="GB2312"?> 
<?xml-stylesheet type="text/css" href="17.12.css"?> 
<qiu> <title> 立 秋 </title> 

<author> 宋 ” 刘 翰 </author> 

<content> 


乳 鸦 啼 散 玉屏 空 ， 一 枕 新 凉 一 扇 风 。<br/> 
睡 起 秋色 无 更 处 ， 满 阶 梧桐 月 明 中 。<br/> 


</content></qiu> 


创建 XML 文档 ， 文 档 内容 非 常 简单 ， 创 建 了 一 个 根 标记 qiu 及 其 子 标记 title、author 和 
content。xml-stylesheet 表 示 引 入 一 个 CSS 文 件 。 在 IE9.0 中 浏览 效果 如 图 17-19 所 示 ， 可 以 看 到 
页 面 显示 了 一 个 树 形 结构 。 


< ECE TE EE < 上 


<?xml version="1.0" encoding="GB2312"?> 
<qu> 
<tte> 立 移 </titie> 
<author> 宋 刘 答 </author> 
<content> 
乳 鸡 硬 获 玉屏 空 ， 一 榨 新 京 一 扁 风 
<br/> 
瞬 起 秋色 无 沈 处 ， 移 往生 相 月 明 中 " 
<br/> 
</content> 
</qiu> 


图 17-18 古诗 欣赏 图 17-19 古诗 树 形 结构 
园 创建 CSS 文 件 ， 修 饰 qiu 元 素 。 


qiu{ 
margin:0px; 
background:url (lan.jpg) no-repeat; /* 添 加 背景 图 片 */ 
width:460px; 
height:320px; 
position:absolute; /* 绝对 定位 */} 


上 面 代码 定义 了 qiu 标 记 的 显示 样式 ， 例 如 外 边 距 、 背 景 图 片 、 宽 度 、 高 度 和 绝对 定位 。 
在 IE9.0 中 ， 浏 览 效果 如 图 17-20 所 示 ， 可 以 看 到 页 面 显示 一 段 文字 ， 无 任何 格式 。 
添加 CSS 代 码 ， 修 饰 titte 和 author 元 素 。 


EELet 
font-size:30px; 


color:green; 
position:absolute; 
left:140px; 
top:20px; 

} 

authort{ 


font-size:18px; 
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color:#4f2b00; 
position:absolute; 
left:160px; 
top:50px; 
} 
上 面 CSS 代 码 定义 了 title 标 记 的 显示 样式 ， 例 如 字体 大 小 、 颜 色 、 绝 对 定位 和 坐标 位 置 。 
定义 了 author 标 记 的 显示 样式 ， 例 如 字体 大 小 、 字 体 颜 色 、 绝 对 定位 和 坐标 位 置 。 
在 IE9.0 中 ， 浏 览 效果 如 图 17-21 所 示 ， 可 以 看 到 页 面 中 的 标题 和 作者 信息 ， 在 指定 位 置 
显示 。 


[Bowmmenn mo ox] Bowmen » | CE rae. | 


图 17-20 定义 背景 图 17-21 定义 标题 和 作者 信息 


添加 CSS 代 码 ， 修 饰 cotent 元 素 。 


content{ 
position:absolute; /* 绝对 定位 */ 
font-size:24px; 
line-height:30px; /* 行 间距 */ 
left:40px; 
top:70px; 
font-family:" 幼 圆 ";} 
br{ display:block; /* 让 诗 旬 分 行 显示 */} 


在 CSS 文 件 中 ， 定 义 了 content 元 素 的 显示 样式 ， 例 如 字体 大 小 、 行 高 、 坐 标 位 置 等 。 这 
里 的 <br> 标 记 也 是 起 到 了 换行 作用 ， 当 将 标记 的 display 属 性 定义 为 block 块 时 ， 可 以 起 到 换行 
的 效果 。 在 IE9.0 中 ， 浏 览 效果 如 图 17-18 所 示 ， 可 以 看 到 页 面 在 指定 位 置 显示 古诗 ， 并 且 标 
题 颜 色 为 绿色 ， 作 者 信息 颜色 为 黄色 。 
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专家 解 惑 


1 背景 色 和 背景 图 片 放 在 一 起 定义 好 吗 ? 

在 设 定 背 景 图 片 时 ， 最 好 同时 也 设 定 背景 色 ， 这 样 当 背 景 图 片 因 某 种 原因 无 法 正常 显示 
时 ， 可 以 使 用 背景 色 来 代替。 当然 ， 如 果 正常 显示 ， 背 景 图 片 会 覆盖 背景 色 。 

2. XML 和 HTML 文 件 有 什么 相同 和 不 同 之 处 ? 

HIML 和 XML 都 是 从 SGMIL 发 展 而 来 的 标记 语言 ， 因 此 ， 它 们 有 些 共 同 点 ， 如 相似 的 
语法 和 标记 。 不 过 HTML 是 在 SGML 定 义 下 的 一 个 描述 性 语言 ， 只 是 一 个 SGML 的 应 用 。 而 
XML 是 SGML 的 一 个 简化 版 本 ， 是 SGML 的 一 个 子 集 。 

XML 是 用 来 存放 数据 的 ，XML 不 是 HTML 的 蔡 代 品 ，XML 和 HTMIL 是 两 种 不 同 用 途 的 语 
言 。XML 是 被 设计 用 来 描述 数据 的 ，HTML 只 是 一 个 显示 数据 的 标记 语言 。 
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本 章 引言 


网 上 听 音 乐 已 经 成 为 一 种 时 尚 ， 许 多 网 友 为 了 方便 ， 就 直接 
在 网 站 下 载 试听 。 但 在 国外 ， 如 果 要 听 音 乐 ， 就 需要 去 指定 的 音 
乐 商店 购买 ， 从 商店 中 挑选 自己 喜欢 的 音乐 。 本 章 以 一 个 外 国 音 
乐 网 站 为 例 ， 综 合 介绍 页 面 布 局 、DIV 排 版 的 制作 方法 。 


页 头 部 分 


页 面 主体 


左 侧 || 中间 | | 右 侧 
列表 || 列表 || 列表 


页 脚 部 分 


@、 wma DIV+CSS3 网 页 布局 与 样式 


18.1 ”构思 布局 


> 9 


本 实例 采用 喜庆 、 大 方 的 红色 为 主题 ， 配 上 多 个 图 片 、 列 表 显 示 各 种 音乐 种 类 。 在 IE9.0 
中 浏览 效果 如 图 18-1 所 示 。 


图 18-1 音乐 商店 首页 


GE 了 由 设计 分 析 


音乐 商店 首页 是 整个 网 站 的 第 一 印象 ， 通 常 需要 设计 的 大 方 、 合 理 ， 能 够 最 大 限度 地 显 
示 页 面 导航 和 音乐 介绍 。 一 般 情况 下 ， 首 页 都 是 概况 性 介绍 ， 各 个 子 页 面 也 可 以 给 出 链接 。 
设计 的 重点 是 布局 规范 、 图 文 结合 漂亮 等 。 

从 图 18-1 所 示 的 页 面 效 果 上 可 以 看 出 ， 页 面 总 体 上 划分 为 上 中 下 结构 ， 上 面 为 页 头 部 
分 ， 中 间 为 页 面 主体 内 容 ,下 面 为 页 脚 。 页 头 部 分 包括 两 个 部 分 ， 分 别 是 页 面 导航 链接 和 商店 
介绍 。 页 面 主体 又 分 为 左 中 右 3 个 版 式 ， 即 使 用 div 层 将 页 面 主体 划分 为 3 个 并 列 区 域 。 页 脚 部 
分 比较 简单 ， 只 是 一 个 版 权 信 息 。 


418 


GE 于 排版 架构 


第 18 章 ”心灵 深 处 的 旋律 一 一 音乐 网 站 


音乐 网 站 比较 常见 ， 排 版 方式 也 是 多 种 多 样 ， 但 其 本 质 基本 一 样 ， 即 包含 内 容 比 较 类 


似 。 例 如 包含 导航 菜单 、 音 乐 列表 、 音 乐 新 闻 、 


音乐 评论 和 具有 自己 风格 的 公司 Logo 等 。 本 


实例 也 包含 了 上 面 这 些 信息 ， 其 版 式 如 图 18-2 所 示 。 


页 头 部 分 


页 面 主 体 


左 侧 || 中 间 
列表 || 列表 


右 侧 
列表 


页 脚 部 分 


18-2 页 面 框架 


在 本 实例 中 ， 使 用 div 层 进行 模块 划分 ， 其 代码 如 下 : 


<div id="wrapper"> 
<div id="nav">/* 导 航 菜 单 */ 
</div> 
<div id="topcon">/* 网 站 介绍 */ 
</div> 
</div> 
<div id="content"> 
<div id="body">/* 页 面 主体 */ 
<div class="box" id="news"> 
</div> 
<div class="box" id="hits"> 
</div> 
<div class="box" id="new"> 
</div> 
</div> 
<div id="footer"> </div> 
</div> 
</div> 


/* 页 面 主体 左 侧 */ 
/* 页 面 主体 中 间 */ 
/* 页 面 主体 右 侧 */ 


/* 页 脚 部 分 */ 


上 面 的 各 个 子 块 部 分 ， 直 接 对 应 了 HTML 代 码 中 的 各 个 div 层 。#0av 和 #topcon 共 同 组 成 页 


头 部 分 ， 包 含 导航 菜单 、 背 景 图 片 和 网 站 介绍 。 


含 在 content 层 里 面 ，#wrapper 是 整个 网 页 的 布局 容器 。#body 中 包含 了 页 面 主 体 ， 


乐 新 闻 、 音 乐 列表 和 新 发 布 等 列表 。 


#footer 是 页 脚 部 分 ， 比 较 简 单 ， 这 里 将 其 包 
里 面包 含 音 


页 面 主体 中 是 左 中 右 版 式 ， 每 个 版 式 都 采 


列表 形式 显示 ， 如 图 18-3 所 示 。 
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Listl 


List2 


图 18-3 列表 方式 显示 


在 CSS 样 式 文件 中 ， 对 上 面 的 div 层 的 修饰 代码 如 下 : 


/** layout *#*/ 
#wrapper { 
width: 678px; 
min-height: 750px; 
_height: 750px; 
background: url (images/header.jpg) no-repeat; 
position: relative; 


hf 
padding: 25px 0 0 30px; 
font: 32px "arial black", arial, sans-serif; 
color: #151515; 

} 

hl em { 
Color: #ffffff; 
font-weight: bold; 
font-style: normal; 
position: relative; 
top: -4px; 

} 

#content { 
width: 710px; 
position: absolute; 
color: #fff; 
top: 299px; 
left: 33px; 

} 

#content a { 
color: #fff; 

} 

#content a:hover { 
color: #fee; 


} 


在 上 面 代码 中 ，#wrapper 选 择 器 定义 了 整个 布局 容器 显示 ， 


例如 宽 


| 受 、 


下 


滑 


凡 
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齐 方 式 ， 并 使 用 min-height 属 性 设置 层 的 最 小 高 度 为 750px， 但 下 浏览 器 不 支持 这 个 属性 。 
#content 选 择 器 中 定义 了 宽度 、 对 齐 方式 、 字 体 颜色 和 坐标 位 置 。 


18.2 模块 分 害 


页 面 框架 整体 布局 完成 之 后 ， 就 可 以 对 各 个 模块 进行 分 别处 理 ， 最 后 再 统一 整合 、 调 整 
样式 。 这 也 是 设计 、 制 作 网 站 的 一 般 步骤 。 


~、 


9 


本 实例 页 头 部 分 包含 两 个 方面 的 内 容 ， 一 个 是 导航 菜单 ， 另 一 个 是 音乐 商店 介绍 。 其 
中 ， 商 店 介绍 部 分 包含 了 文字 和 图 片 。 页 头 部 分 效果 如 图 18-4 所 示 。 


欢迎 到 音乐 商店 


在 办 里 可 以 技 到 自己 章 区 的 癌 条 
可 以 从 这 个 杭 板 中 出路 我 科 卫 站 的 任何 辐 庙 ， 可 以 免费 位 用 洛 


图 18-4 页 头 部 分 


创建 HTML 页 面 ， 其 中 实现 页 头 部 分 的 HTML 代 码 如 下 : 


<hl><em><span lang="zh-cn"> 音 乐 </span></em> <span lang="zh-cn"> 商 店 </ 
span></h1> 
<div id="nav"> 
<ul> 
<1i><a href=""><span class="style2">01</span> </a> 
<span lang="zh-cn" class="stylel"><a href="index.html"> 关 于 商店 </ 
a></span></1i> 
<li><a href=""><span>02</span> </a> 
<span lang="zh-cn" class="stylel"><a href="index.html"> 男 廊 </a></ 
span></1i> 
<1i><a href=""><span>03</span> </a> 
<span lang="zh-cn"” class="stylel"><a href="index.html"> 免 费 音乐 </ 
a></span></1i> 
<li style="height: 39px"><a href=""><span>04</span> </a> 
<span lang="zh-cn" class="stylel"><a href="index.html"> 艺 术 家 </ 
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a></span></1i> 
<li><a href=""><span>05</span> </a> 
<span lang="zh-cn"” class="stylel"><a href="index.html"> 联 系 我 们 </ 
a></span></1i> 
</ul> 
</div> 
<div id="topcon"> 
<div id="topcon-inner"> 
<h2><span lang="zh-cn"> 欢 迎 </span> <span lang="zh-cn"> 到 音乐 商店 </ 
span></h2> 
<p> 
<span id="result box" lang="zh-CN" class="short text" 
closure uid hllzq="136" c="4" a="undefined" kd="null"> 
<span closure uid hllzq="112"” kd="null"> 在 这 里 可 以 找到 自己 喜欢 
的 音乐 </span><span closure uid hllzq="116" kd="null"></span></span></p> 
<p> 
<span id="result box0" lang="zh-CN" class="short text" closure_ 
uid hllzq="136" c="4" a="undefined" kd="null"> 
<span closure uid hllzq="189"> 可 以 </span><span closure uid_ 
hllzq: "190"> 从 </span><span closure_uiqd hl11zq="191"> 这 个 模板 </span><span closure_ 
uid hllzq="192"> 中 </span><span closure_ uid hl1zq="193"> 删 除 </span><span 
closure uid hl1zq="194"> 我 们 网 站 </span><span closure uid hl1zq="195"> 的 </ 
span><span closure uid hl1zq="196"> 任 何 </span><span closure_uid hl11zq="197"> 链 
接 ， 可 以 免费 使 用 这 些 模板 。</span></span></p> 
</div> 
</div> 


上 面 代码 中 ， 首 页 使 用 标题 h1， 定 义 本 网 站 标识 ， 即 “音乐 商店 ”。 在 ID 名 称 为 nav 的 
层 中 ， 使 用 无 序列 表 创 建 了 导航 菜单 ， 用 于 链接 网 站 中 其 他 的 子 页 面 。 在 ID 名 称 为 topcon 的 
层 中 ， 使 用 文本 信息 介绍 了 本 商店 的 主体 内 容 。 

添加 CSS 代 码 ， 定 义 页 头 显示 样式 ， 代 码 如 下 : 


#nav { 
position: absolute; 
top: Opx; 
left: 335px; 
width: 500px; 

} 

#nav 1i { 
float: left; 
background: url (images/nav left.gif) no-repeat; 
list-style: none; 
padding-left: 1l10px; 
padding-right: 20px; 
padding-top: 45px; 
line-height: 1.1; 

} 


#nav span { 


display: block; 
font-size: llpx; 
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#nav a { 
Color: #FFFFFF; 
font-size: llpx; 
font-weight: bold; 
text-decoration: none; 

} 

/** topcontent **/ 

#topcon { 
background: url (images/topcon.jpg) no-repeat; 
width: 427px; 
position: absolute; 
top: 105px; 
left: 338px; 
Color: #fff; 

} 

#topcon-inner { 
margin: 33px 40px 4lpx 85px; 
height: 120px; 
overflow: auto; 

1 

#topcon h2 { 
font-size: 14px; 


} 

#nav 样 式 中 定义 了 层 nav 的 整体 样式 ， 例 如 宽度 、 绝 对 定位 和 坐标 位 置 。#nav li 样式 中 
定义 了 列表 选项 的 显示 样式 ， 例 如 行 高 、 浮 动 定位 ， 背 景 图 片 、 列 表 特 殊 符号 和 内 边 距 等 。 
#nav span 定 义 了 span 元 素 以 块 显示 ， 字 体 大 小 为 11px。 知 av a 定义 了 超级 链接 显示 样式 ， 例 如 
字体 颜色 、 字 体 大 小 、 下 划 线 和 字体 样式 等 。#topcon 定 义 了 页 头 部 分 的 背景 图 片 、 宽 度 、 相 
对 定位 、 坐 标 位 置 和 字体 颜色 等 。#topcon-inner 定 义 了 外 边 距 和 高 度 。#topcon h2 定 义 了 字体 
大 小 。 


页 面 主体 左 侧 显示 的 是 音乐 新 闻 ， 例 如 当前 的 音乐 盛会 和 音乐 专辑 出 版 等 。 可 以 包含 文 
本 和 图 片 信息 等 。 在 IE9.0 中 浏览 效果 如 图 18-5 所 示 。 


00 


地 尔 书 加 新 专 转 曲 目 呈 光 将 于 8 
月 296 上 击 - 


里 多 ~ 


00 
大 运 村 里 其 和 多。 体验 中 国 估 统 
文化 半 从 音乐 其 压 


文生 体验 区 有 中 国 传统 文化 展 - 
油画 艺 木质 、 周 下 艺术 飞 以 及 汉 
天 学 习 中 心 等 。 外 国运 

星 可 以 欣 黄 到 中 国 的 传统 文化 - 
ET 


图 18-5 页 面 左 侧 列表 
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在 HTML 网 页 中 ， 实 现 上 面 效 果 的 HTML 代 码 如 下 : 


<div id="content"> 
<div id="body"> 
<div class="box" id="news"> 
<div class="box-t"><div class="box-r"><div class="box-— 
b"><div class="box-1"> 
<div class="box-tr"><div class="box-br"><div class="box-— 
bl"><div class="box-tl1"> 
<h2><span lang="zh-cn"> 新 闻 </span> &amp; <span lang="zh-cn"> 事 


件 </span></h2> 

<h3>06.03.2011</h3> 

<p><span lang="zh-cn"> 李 尔 - 韦 恩 新 专辑 曲目 曝光 将 于 8 月 29 日 上 市 。</ 
span></p> 

<p class="more"><span lang="zh-cn"> 更 多 </span><a href=" ">...</ 
a></p> 

<div class="hr-yellow"> </div> 

<h3>06.03.2011</h3> 

<p> 


<span id="result boxl" lang="zh-CN" class="short text" 
closure uid hllzq="136" c="4" a="undefined" kd="null"> 

<span closure uid hllzq="307" kd="null"> 大 运 村 里 欢乐 多 ; 体验 
中 国 传统 文化 美妙 音乐 减 压 </span><span closure uid hllzq="314" kd="null"></span></ 
span></p> 

<p><span lang="zh-cn"></span> 文 化 体验 区 有 中 国 传统 文化 展 、 油 画 艺 
术 展 、 雕 塑 艺术 展 以 及 汉语 学 习 中 心 等 ， 外 国运 动员 在 这 里 可 以 欣赏 到 中 国 的 传统 文化 ， 还 可 以 亲自 上 阵 
体验 一 把 。</p> 


<p class="more"><span lang="zh-cn"> 更 多 </span><a href="">...</ 


a></p> 
</div></div></div></div> 
</div></div></div></div> 
</div> 
</div></div> 


上 面 代码 中 ，content 层 是 页 面 内 容 的 布局 容器 ， 这 里 包含 了 页 面 主体 和 页 脚 ， 其 样式 在 
后 面 介 绍 。body 层 是 页 面 主体 的 布局 容器 ， 包 含 了 左 中 右 版 式 布 局 ， 上 面 代码 只 是 列 出 了 左 
侧 列表 。 下 面 两 个 小 节 介绍 的 div 层 ， 都 包含 在 body 层 中 。 

ID 名 称 为 news 的 层 ， 是 页 面 左 侧 列表 的 布局 容器 ， 其 内 容 都 是 在 此 处 显示 。news 层 所 包 
含 的 层 ， 用 来 定义 边框 显示 样式 。 

在 样式 文件 中 ， 对 于 上 面 层 的 CSS 样 式 定义 代码 如 下 : 

box 

float: left; 
width: 195px; 
background: #730F11; 
margin-right: 1l18px; 
由 
-box-t { background: top Url (images/box t.gif) repeat-x; } 


-box-r { background: right url (images/box r.gif) repeat-y; } 
.box-b { background: bottom url (images/box b.gif) repeat=x;? } 
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-box-1 { background: left Url (images/box 1.gif) repeat-y; } 
-box-tr { background: top right url (images/box tr.gif) no-repeat; } 
-box-br { background: bottom right Url (images/box br.gif) no-repeat; } 
.box-bl { background: bottom left url (images/box bl.gif) no-repeat; } 
.box-tl1 { background: top left url (images/box tl1.gif) no-repeat; } 
-box=tl 

padding: 13px 18px; 
} 
-box pl 

margin: lem 0; 
} 
P.more { 

margin: 0; 


} 


上 面 代码 中 ， 类 选择 器 box 定 义 了 页 面 右 浮动 显示 。 类 选择 器 box-t 定 义 上 面 的 背景 图 
片 ， 其 他 依次 类 推 。 嵌 套 选 择 器 box p 定 义 了 外 边 距 。 


间 内 容 列 表 


在 页 面 主体 内 容 中 ， 中 间 列 表 包 含 了 音乐 


网 站 中 ， 大 力 推荐 的 音乐 曲目 清单 ， 其 中 包含 

了 文本 信息 和 图 片 。 在 此 列表 中 ， 浏 览 者 可 以 -人 
根据 需要 选择 自己 喜欢 的 ， 并 进入 相应 的 re 
子 页 面 。 在 正 9.0 中 浏览 效果 如 图 18-6 所 示 。 i 


劳 流 瑞 特 


画 皇 专科 
妆 伯 句 斯 


劳 波 瑞 特 
依法 . 萨 姆 莫 小 号 
阿 梅 特 


图 18-6 页 面 中 间 列 表 


在 HTML 文 件 中 ， 实 现 页 面 主 体 中 间 列 表 的 代码 如 下 : 


<div class="box" id="hits"> 
<div class="box-t"><div class="box-r"><div class="box- 
b"><div class="box-1"> 
<div class="box-tr"><div class="box-br"><div class="box- 
bl"><div class="box-tl1"> 
<h2>HIT&#39;S <span lang="zh-cn"> 清 单 </span></h2> 
<h3><span lang="zh-cn"> 影 视 </span></h3> 
<img src="images/pic 1.jpg" width="63" height="91" alt="Pic 1" 
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class="right" /> 
<ul> 
<1i><span lang="zh-cn"> 依 波 。 萨 姆 悲 小 号 </span><a href=" 
ee 
<1i><span lang="zh-cn"> 朗 伯 旨 斯 </span><a href=" ">... </ 
a></1i> 
<1i> 
<span id="result box2" lang="zh-CN" class="short_ 
text" closure uid hllzq="136" c="4" 
a="undefined" kd="null"> 
<span closure uid hllzq="615"” kd="null"> 阿 梅 特 </ 
span></span><a href=" ">....... </a></1i> 
<li><span lang="zh-cn"> 劳 波 瑞 特 </span><a href=" ">... </ 
a></1i> 
</ul> 
<div class="hr-yellow"> </div> 
<h3><span lang="zh-cn"> 历 史 专 辑 </span></h3> 
<img src="images/pic 2.jpg" width="63" height="87" alt="Pic 2" 
class="right" /><ul> 
<li style="width: 123px"><span lang="zh-cn"> 朗 伯 强 斯 </ span><a 
href=" ">... </a></li> 
</ul> 
&nbsp;<ul> 
<1i><span lang="zh-cn"> 劳 波 瑞 特 </span><a href=" ">... 
</a></1i> 
<li><span lang="zh-cn"> 依 波 。 萨 姆 悲 小 号 </span><a href=" 
op 三 人 > 区 于 六 
< 
<span id="result box3" lang="zh-CN" class="short text" closure uid_ 
hilzq="136" c="4" a="undefined" kd="null"> 
<span closure uid hllzq="615" kd="null"> 阿 梅 特 </span></span><a href=" 
.</a></1i> 


</ul> 
</div></div></div></div> 
</div></div></div></div> 
</div> 


上 面 代码 中 ，hits 层 实际 是 包含 在 body 层 中 的 ， 用 于 显示 页 面 主体 的 中 间 内 容 。 在 hits 层 
中 ， 同 样 使 用 box 类 选择 器 定义 中 间 列 表 的 显示 样式 。hits 层 包含 了 图 片 和 无 序列 表 信 息 。 
在 样式 文件 中 ， 对 于 上 面 层 的 CSS 样 式 定义 如 下 : 


#hits { 
width: 240px; 
} 
#hits .box-tl { 
padding-bottom: 22px; 
} 
ahits vl 
margin: lem 0; 
} 
#hits 1i { 


426 


第 18 章 ”心灵 深 处 的 旋律 一 一 音乐 网 站 


list-=style: nonez 
margin: 0.9em 0; 
} 
#hits ul a { 
text-decoration: none; 
} 
#hits ul a:hover { 
text-decoration: underline; 


ls 


上 面 代 码 中 ，#phits 选 择 器 定义 了 中 间 部 分 的 宽度 为 240 像 素 ，#bits .box-tl 和 #hits ul 选择 器 
分 别 定 义 了 内 边 距 和 外 边 距 。#phits 1i 选 择 器 定义 了 列表 选项 的 显示 样式 ， 例 如 无 特殊 符号 显 
示 和 外 边 距 等 。#bits ul a 定 义 了 列表 超级 链接 显示 样式 ， 即 不 带 下 划 线 。#hits ul a:hover 选 择 
器 定义 了 列表 中 超级 链接 的 悬浮 样式 ， 即 鼠标 放 到 链接 上 时 ， 显 示 下 划 线 等 。 


人 ER 右 侧 内 容 列 表 


在 音乐 网 站 首页 中 ， 右 侧 内 容 主要 显示 音乐 专辑 
发 布 信息 ， 例 如 某 某 发 布 最 新 专辑 信息 。 右 侧 内 容 可 
以 包含 文本 信息 和 图 片 信息 ， 通 过 相应 链接 可 以 进入 
新 专辑 页 面 信息 。 右 侧 内 容 列表 ， 在 IE9.0 中 ， 浏 览 效 
果 如 图 18-7 所 示 。 


图 18-7 右 侧 内 容 列 表 


在 HIML 页面 中 ， 实 现 右 侧 内 容 的 HTML 代码 如 下 ; 


<div class="box" id="new"> 
<div class="box-t"><div class="box-r"><div class="box-— 
b"><div class="box-1"> 
<div class="box-tr"><div class="box-br"><div class="box— 
bl"><div class="box-tl1"> 
<h2>gnbsp;<span lang="zh-cn"> 新 发 布 </span></h2> 


<h3><span lang="zh-cn"> 伊 塔 撤 德 </span></h3> 
<img src="images/pic 3.jpg" width="66" height="52" alt="Pic 3" 
class="right" /> 
<p><span lang="zh-cn"> 波 特 术 黎 ..... </span>. </p> 
<p> 
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义 了 底部 内 边 距 和 上 下 外 边 距 距离 。 使 用 类 选择 器 clear， 用 


人 要 一 ”页 脚 部 分 


<span id="result box4" lang="zh-CN" class="short text™" 
closure uid hilzq="136" c="4" a="undefined" kd="null"> 
<span closure uid hl1lzq="681"> 梅 塞纳 斯 </span></span>quam. 
Sed</p> 


<h3><span lang="zh-cn"> 曼 撒 纳 斯 </span></h3> 
<img src="images/pic 4.jpg" width="66"” height="52" alt="Pic 4" 
人 
<p><span lang="zh-cn"> 纳 迪 斯 </span> sollicitudingnbsp; 
<span lang="zh-cn"> 际 哇 里 斯 </span>convallis</p> 
<h3><span lang="zh-cn"> 撒 黎 绳 斯 </span></h3> 
<img src="images/pic 5.jpg" width="66" height="52" alt="Pic 5" 
class="right" /> 
<p><span lang="zh-cn"> 桑 达 . 纳 斯 </span> nvallis <span lang="zh-— 
cn"> 劳 特 . 可 瓦斯 </span> .vallislacus 
<span lang="zh-cn"> 阿 里 瓦斯 </span>.vallis</p> 
</div></div></div></div> 
</div></div></div></div> 
</div> 
<div class="clear"> </div> 


在 上 面 代码 中 ，new 层 是 页 面 右 侧 内 容 的 布局 容器 ， 其 文本 和 图 片 信息 都 在 此 层 中 显 
示 。 在 页 面 最 后 一 行 中 ， 创 建 了 一 个 clear 层 。 
在 样式 文件 中 ， 对 于 上 面 层 的 CSS 样 式 定义 如 下 : 


回 


#new { 
margin-right: 0; 


#new .box-tl { 
padding-bottom: l18px; 


#new p { 
margin-top: 0; 
margin-bottom: 3.6em; 


.Clear { 
clear: both; 


上 面 代码 中 ，#new 选 择 器 定义 了 new 层 的 右 外 边 距 距离 ， 下 面 的 #new .box-tl 和 0#new p 分 别 定 
消除 float 浮 动 布 局 带 来 的 影响 。 


本 实例 的 页 脚 部 分 非常 简单 ， 但 作为 一 个 必 不 可 少 的 元 素 ， 又 不 得 不 介绍 。 页 脚 部 分 主 


要 显示 版 权 信息 和 地 址 信息 ， 在 IE9.0 中 ， 浏 览 效果 如 图 18-8 所 示 。 


到 18-8 页 脚 部 分 
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在 HIMIL 文 件 中 ， 实 现 页 脚 部 分 的 HTML 代码 如 下 : 


<div id="footer"> 
<p>@ <span lang="zh-cn"><a href="index.html"> 联 系 我 们 </a></span></p> 
</div> 


在 CSS 样 式 文件 中 ， 定 义 footer 部 分 的 CSS 代 码 如 下 : 


#footer { 

text-align: center; 
} 
#footer P { 

margin: 0.8em; 


} 
上 面 代 码 中 ，#footer 定 义 了 页 脚 对 齐 方 式 ，#footer p 选 择 器 定义 了 外 边 距 距离 。 


18.3 ”整体 调整 


通过 上 面 对 各 个 模块 的 定义 ， 各 个 模块 的 基本 样式 已 经 具备 ， 页 面 基本 成 形 。 在 制作 完 
最 后 ， 还 需要 对 页 面 效果 进行 一 些 细微 的 调整 ， 例 如 各 块 之 间 的 padding 和 margin 值 是 否 
体 页 面 协调 ， 各 个 子 块 之 间 是 否 统一 等 。 


页 面 内 容 主 体 调整 


虽然 前 面 使 用 CSS 定 义 了 页 面 内 容量 衣 了 二 


65232011 


样式 ， 即 左 侧 、 中 间 和 右 侧 内 容 列表 的 ER 

显示 样式 ， 但 其 整体 样式 并 没有 进行 定 wei 

义 ， 例 如 对 body 层 的 样式 修饰 等 。 在 没 : 

有 使 用 CSS 代 码 对 样式 进行 定义 之 前 ， 

在 IE9.0 中 ， 浏 览 效 果 如 图 18-9 所 示 。 | wa Pm 


义 body 主 体内 容 的 显示 样式 ， 其 代码 


如 下 


me 


在 CSS 样 式 文件 中 ， 添 加 代码 定 


2 图 18-9 body 样 式 定义 前 
#body { 
border: 3px solid white; 
background: #901315; 
padding: 1l18px; 
} 
#body h2 { 


font=st2ze: 12px; 
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text-align: right; 
margin-bottom: 1.S5em; 
上 
#body h3 { 
font-size: 9px; 
Color: #FFEAO0O; 


#body .more a { 
font-weight: bold; 
text-decoration: none; 


#body .more a:hover { 
text-decoration: underline; 


#body .hr-yellow { 

border-top: lpx solid #FFEAO0O0; 
padding-bottom: lem; 
margin-top: lem; 


在 上 面 的 代码 中 ，#ody 选 择 器 定义 了 边框 样式 、 背 景色 和 外 边 距 距离 。#body h2 定 义 了 标 
题 h2 的 显示 样式 ， 例 如 字体 [ 喇 
大 小 、 对 齐 方式 和 底部 外 边 mesh | 
距 距离 。#ody h3 选 择 器 定义 rp 
了 标题 h3 的 显示 样式 ， 例 如 2 本 
字体 大 小 和 字体 颜色 。#body ee 
.more a 选择 器 定义 了 字体 是 否 re 
加 粗 和 带 有 下 划 线 。 
CSS 样 式 代 码 添加 后 ， 
在 IE9.0 中 浏览 效果 如 图 18-10 
折 示 。 可 以 发 现 文字 标题 发 
生变 化 ， 都 变 为 黄色 ， 每 个 
选项 之 间 都 用 浅黄 色 边 框 隔 图 18-10 body 样 式 定义 后 
开 ， 并 且 文字 变 小 。 


最 后 ， 我 们 就 可 以 对 页 面 整体 样式 进行 统一 和 协调 了 。 例 如 设置 全 局 文本 样式 、 对 齐 方 
式 和 内 外 边 距 等 。 还 可 以 对 页 面 中 的 内 容 块 进行 大 小 调整 。 
在 CSS 样 式 文件 中 ， 其 代码 如 下 : 


html, body, hl, h2, h3, h4, ul, 1i { 
margin: 0; 


padding: 07 
} 
hl img { 
display: block; 
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Color: #FFFFFF; 

} 

a:hover { 
color: #FFA405; 

上 

RE 
float: left; 

} 

SE 
float: right; 

' 

.more { 
text-align: right; 

} 

body { 
background: #3A0404 url (images/page bg.jpg) repeat-x; 
font: llpx arial, sans-serif; 
color: #464544; 
padding-bottom: 1l0px; 

} 


在 上 面 代码 的 body 标 记 选 择 器 中 ， 定 义 了 背景 图 片 、 背 景 颜色 、 字 体 样式 和 底部 内 边 距 
距离 等 。 其 他 标记 选择 器 比较 简单 ， 这 里 就 不 再 介绍 。 
整体 样式 设置 完成 后 ， 页 面 在 正 9.0 中 浏览 效果 如 图 18-1 所 示 。 


18.4 专家 解 惑 


1. 有 时 候 显示 一 个 三 层 并 列 网 页 ， 在 IE 和 Firefox 浏 览 器 的 显示 效果 为 什么 不 同 ? 

很 多 时 候 ， 尤 其 是 容器 内 有 平行 布局 ， 例 如 有 两 、 三 个 float 的 div 时 ， 宽 度 很 容易 出 现 
问题 。 在 下 浏览 器 中 ， 外 层 的 宽度 会 被 内 层 更 宽 的 div 挤 破 。 此 时 ， 一 定 要 用 Photoshop 或 者 
Firework 量 取 像 素 级 的 精度 。 

2. 在 正 浏览 器 中 ， 图 片 和 下 方 父 元 素 产生 间隙 该 怎么 解决 ? 

在 正 浏览 器 中 ， 如 果 父 元 素 直 接 包 含 <img>， 这 张 图 片 下 方 会 和 父 元素 边 缘 产生 间隙 。 

其 解决 办 法 有 两 个 ， 一 是 在 源 代码 中 让 </div> 和 <img> 在 同一 行 ， 因 为 那个 间隙 是 由 换行 
符 产生 的 。 二 是 给 <img> 添 加 样式 ， 其 代码 为 


display:block; 
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小 


本 章 引言 


作为 小 型 软件 企业 的 网 站 ， 一 般 规模 不 是 太 大 ， 通 常 包含 
3~5 个 栏目 ， 例 如 产品 、 客 户 和 联系 我 们 栏目 等 ， 并 且 有 的 栏目 其 
至 只 包含 一 个 页 面 ， 例 如 联系 我 们 栏目 。 此 类 网 站 通常 都 是 为 了 
展示 公司 形象 ， 说 明 一 下 公司 的 业务 范围 和 产品 特色 等 ， 一 般 实 
现 这 样 的 网 站 就 是 一 个 首页 加 上 若干 内 容 即 可 。 


欢迎 来 到 我 们 的 网 站 


远大 公司 成 立 于 1998 年 ， 注 册 资 本 


金 无 傍 资 | 
质量 体系 认证 中 心 般 居 的 1509001: 2 所 量 芝 理 体系 认证 二 忆 . 
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19.1 构思 布局 


本 实例 是 模拟 一 个 小 型 软件 公司 的 网 站 ， 其 公司 主要 承接 电信 方面 的 各 种 软件 项 目 。 
网 站 上 包括 首页 、 产 品 信息 、 客 户 信息 和 联系 我 们 等 栏目 。 本 实例 中 采用 红色 和 白色 配合 使 
用 ， 红 色 部 分 显示 导航 菜单 ， 白 色 显示 文本 信息 。 在 下 9.0 中 ， 浏 览 效果 如 图 19-1 所 示 。 


YOUR LOGO COMPANY 


计算 机 网 站 


图 19-1 计算 机 网 站 首页 


人 EN 设计 分 析 


作为 一 个 软件 公司 网 站 首页 ， 其 页 面 需要 简单 、 明 了 ， 给 人 以 清晰 的 感觉 。 页 头 部 分 主 
要 放置 导航 菜单 和 公司 Logo 信 息 等 ， 其 Logo 可 以 是 一 张 图 片 或 者 文本 信息 等 ; 页 面 主体 分 为 
两 个 部 分 ， 页 面 主体 左 侧 是 公司 介绍 ， 对 于 公司 介绍 可 以 在 首页 上 概括 性 描述 ， 页 面 主体 右 
例 是 新 闻 、 产 品 和 客户 信息 等 ， 其 中 ， 产 品 和 客户 的 链接 信息 ， 以 列表 形式 对 重要 信息 进行 
介绍 ， 也 可 以 通过 页 面 顶部 导航 菜单 进入 相应 页 面 介绍 。 

对 于 网 站 的 其 他 子 页 面 ， 篇 幅 可 以 比较 短 ， 其 重点 是 介绍 软件 公司 业务 、 联 系 方式 、 产 
品 信息 等 ， 页 面 与 首页 风格 相同 即 可 。 


《ESE 排版 架构 


从 图 19-1 可 以 看 出 ， 页 面 结构 并 不 是 太 复杂 ， 采 用 的 是 上 中 下 结构 ， 页 面 主体 部 分 又 嵌 
套 了 一 个 左右 版 式 结构 。 其 效果 如 图 19-2 所 示 。 
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也 可 


同 组 


页 头 部 分 


页 面 主体 


页 面 左 侧 页 面 右 侧 


页 脚 部 分 


图 19-2 页 面 总 体 框架 


在 HTML 页 面 中 ， 通 常 使 用 div 层 对 应 上 面 不 同 的 区 域 ， 可 以 是 一 个 div 层 对 应 一 个 区 域 ， 


以 是 多 个 div 层 对 应 同一 个 区 域 。 本 实例 的 div 代 码 如 下 所 示 。 
<div id="container">/* 页 面 布局 容器 */ 


<div id="top"> 

</div><!--end top--> 

<div id="header"> 

</div><!--end header--> 

<div id=me> /* 导 航 菜单 */ 
</div> 

<div id="content"> 
<div id="text"> 
</div><!--end text--> 
<div id="column"> /* 页 面 主体 右 侧 内 容 */ 
</div><!--end column--> 

</div><!--end content--> 

<div id="footer"> /* 页 脚 部 分 */ 
</div><!--end footer--> 

</div><!--end container--> 


/* 页 面 主体 左 侧 内 容 */ 


上 面 代码 中 ， 了 名 称 为 container 的 层 是 整个 页 面 的 布局 容器 ，top 层 、header 层 和 me 


成 了 页 头 部 分 ，top 层 用 于 显示 页 面 Logo，header 层 用 于 显示 页 头 文本 信息 ，me 层 


示 页 
页 面 
航 链 


头 导航 菜单 信息 。 页 面 主体 是 content 层 ， 其 包含 了 两 个 层 : text 
主体 左 侧 内 容 ， 显 示 公司 介绍 信息 ;column 层 是 页 面 主体 右 侧 内 容 ， 显 示 公 司 常用 


接 。footer 层 是 页 脚 部 分 ， 用 于 显示 版 权 信息 和 地 址 信息 。 
在 CSS 文 件 中 ， 对 应 container 和 content 层 的 CSS 代 码 如 下 : 


#container 

EL 

margin: Opt auto; 
width: 770px; 
position: relative; } 
#content { 


层 和 column 层 。text 


background: transparent url('images/content.gif') repeat-y; 


clear: both; 
margin-top: Spx; 
width: 770px; 

} 
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上 面 代码 中 ，#container 选 择 器 定义 了 整个 布局 容器 的 宽度 、 外 边 距 和 定位 方式 。 
#content 选 择 器 定义 了 背景 图 片 、 宽 度 和 项 部 边 距 。 


但 ,2 模块 分 审 


当 页 面 整体 架构 完成 后 ， 就 可 以 动手 制作 不 同 的 模块 区 域 了。 其 制作 流程 ， 采 用 自 上 而 
下 ， 从 左 到 右 的 顺序 。 完 成 后 ， 再 对 页 面 样式 进行 整体 调整 。 


EE Logo 与 导航 菜单 


一 般 情况 下 ，Logo 信 息 和 导航 菜单 都 是 放 在 页 面 项 部 ， 作 为 页 头 部 分 。 其 中 Logo 信 息 
作为 公司 标志 ， 通 常 放 在 页 面 的 左上 角 或 右上 角 ; 导航 菜单 放 在 页 头 部 分 和 页 面 主体 二 者 之 
间 ， 链接 其 他 的 页 面 。 在 正 9.0 中 浏览 效果 如 图 19-3 所 示 。 


YOUR LOGO COMPANY 


计算 机 网 站 


图 19-3 页 面 Logo 和 导航 菜单 


在 HTML 文 件 中 ， 用 于 实现 页 头 部 分 的 HTML 代 码 如 下 : 


<div id="top"> 
</div><!--end top--> 
<div id="header"> 
<h1> 计 算 机 网 站 </h1> 
</div><!--end header--> 
<div id=me> 


<ul id="menu"> 

<1i><a href="#" class="actual"> 首 页 </a></1i> 
<1i><a href="#"” > 产品 </a></1i> 

<1i><a href="#"> 客 户 </a></1i> 

<1i><a href="#"> 联 系 方式 </a></1i> 

</ul> 

</div> 


上 面 代码 中 ，top 层 用 于 显示 页 面 Logo; header 层 用 于 显示 页 头 的 文本 信息 ， 例 如 公司 名 
称 ; me 层 用 于 显示 页 头 导航 菜单 。 在 me 层 中 ， 有 一 个 无 序列 表 ， 用 于 制作 导航 菜单 ， 每 个 选 
项 都 是 由 超级 链接 组 成 的 。 

在 CSS 样 式 文件 中 ， 对 应 上 面 标 记 的 CSS 代 码 如 下 : 
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#top { 
background: transparent url('images/top.jpg') no-repeat; 
height: S50px; 


#top P { 
margin: Opt; 
padding: Opt; 


#header { 

background: transparent url('images/header.jpg') no-repeat; 
height: 150px; 

margin-top: Spx; 


#menu { 

position: absolute; 
top: 180px; 

LeEts. LSDxs 


#header hl { 
margin: S5px Opt Opt S50px; 
padding: Opt; 
font-size: 1.7em; 
} 
#header h2 { 
margin: 10px Opt Opt 90px; 
padding: Opt; 
font-size: 1.2em; 
color: rgb(223, 139, 139); 
} 
ul#menu { 
margin: Opt; 
} 
#menu 1i { 
list-style-type: none; 
float: left; 
text-align: center; 
width: 104px; 
margin-right: 3px; 
font-size: 1.05em; 
} 
#menu a { 
background: transparent url('images/menu.gif') no-repeat; 
overflow: hidden; 
display: block; 
height: 28px; 
padding-top: 3px; 
text-decoration: none; 
twidth: 100%; 
font-size: lem; 
font-family: Verdana,"Geneva CE",lucida,sans-serif; 
COLOre rodl255 255r "255)8 
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#menu 1i > a, #menu 1i > strong { 

width: auto; 

} 
#menu a.actual { 
background: transparent url('images/menu-actual.gif') no-repeat; 
color:” rgb(149 327 32) 

} 
#menu a:hover { 

color: rgb(149, 32, 32); 

} 


上 面 代码 中 ，#iop 选 择 器 定义 了 背景 图 片 和 高 度 ; #beader 定 义 了 背景 图 片 、 高 度 和 顶部 
外 边 距 ，#menu 层 定义 了 层 定位 方式 和 坐标 位 置 。 其 他 选择 器 分 别 定义 了 上 面 三 个 层 中 元 素 
的 显示 样式 ， 例 如 段落 显示 样式 、 标 题 显示 样式 、 超 级 链接 样式 等 。 


人 EU 左 侧 文本 介绍 


在 页 面 主体 中 ， 其 左 侧 版 式 主要 介绍 公司 相关 信息 。 左 侧 文本 采用 的 是 左 浮动 并 且 固 定 
宽度 的 版 式 设计 ， 重 点 在 于 调节 宽度 使 不 同 浏览 器 之 间 能 够 效果 一 致 ， 并 且 颜 色 上 配合 Logo 
和 左 侧 的 导航 菜单 ， 使 整个 网 站 和 谐 、 大 气 。 在 IE9.0 中 浏览 效果 如 图 19-4 所 示 。 


重重 体系 认证 证 书 ， 


图 19-4 页 面 左 侧 文 本 介绍 


在 HTML 文 件 中 ， 创 建 页 面 左 侧 内 容 介绍 的 代码 如 下 : 


<div id="content"> 

<div id="text"> 

<h3 class="headlines"><a href="#" title="testing"> 欢 迎 来 到 我 们 的 网 站 </ 
a></h3> 

<p><img src="images/fotos.jpg" alt="fotos" align="right" /> 

远大 公司 成 立 于 1998 年 ， 注 册 资 本 1700 万 元 。 是 国家 认定 的 高 新 技术 企业 、 软 件 企业 ， 是 专业 的 电 
信 系 统 仿 软 件 和 应 用 服务 供应 商 。</P><p> 

公司 坚持 走 自立 创新 、 稳 步 发 展 的 道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 以 产品 自身 的 品质 ， 先 进 的 
技术 和 良好 的 服务 取信 于 用 户 。2002 年 至 今 公司 先后 有 多 个 软件 产品 获得 了 河南 省 信息 产业 厅 颁 发 的 《 软 
件 产品 登记 证 书 》 和 国家 版 权 局 颁发 的 《软件 著作 权 登 记 证 书 》。 同 时 远大 的 进步 和 发 展 ， 也 得 到 了 政府 
部 门 的 大 力 支 持 和 关注 ， 获 得 国家 科技 部 和 省 、 市 政府 部 门 技 术 创 新 基金 无 偿 资 助 百 余万元 。 并 正式 获得 
中 国 质 量 体 系 认证 中 心 颁发 的 I[s09001 :2008 质 量 管理 体系 认证 证 书 。 
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</p> 

<p>gnbsp;</p> 
</div><!==end text-=> 
</div> 


上 面 代码 中 ，content 层 是 页 面 主体 ，text 层 是 页 面 主体 中 的 左 侧 部 分 。text 层 包含 了 标题 


和 段落 信息 ， 段 落 中 包含 一 张 图 片 。 
在 CSS 文 件 中 ， 对 于 上 面 HTML 标 记 的 CSS 代 码 如 下 : 


#text { 

background: rgb(255, 255, 255) urll('text-top.gif') no-repeat; 
width: 518px; 

colors rgblOr Or ON 

float: left; 

} 

#text hl, #text h2, #text h3, #text h4 { 
colors TOb(LAOF 9r I) 

L 

#text h3.headlines a { 

Colozs TgbD (140; 9 3)s 

} 


上 面 代码 中 ，#text 层 定义 了 背景 图 片 、 背 景 颜色 、 字 体 颜 色 和 页 面 左 浮动 。#text 下 面 的 
选择 器 定义 了 标题 显示 样式 ， 例 如 字体 颜色 等 。#text h3.headlines a 选择 器 定义 了 标题 3、 类 
headlines 和 超级 链接 显示 样式 。 


GERD 石 侧 导 航 链接 


在 页 面 主体 右 侧 版 式 中 ， 文 本 信息 不 是 太 多 ， 
但 非常 重要 。 它 是 首页 用 于 链接 其 他 页 面 的 导航 链 
接 ， 例 如 客户 详细 信息 、 最 新 消息 等 。 同 样 右 侧 版 
式 需 要 设置 为 固定 宽度 并 且 向 左 浮 动 。 在 IE9.0 中 浏 
览 页 面 效果 如 图 19-5 所 示 。 


图 19-5 页 面 右 侧 链 接 
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从 图 19-5 可 以 看 出 ， 包 含 几 个 无 序列 表 和 标题 ， 其 中 列表 选项 为 超级 链接 。HIMIL 文 件 


于 创建 页 面 主 体 右 侧 版 式 的 代码 如 下 : 


<div id="column"> 

<h3><span> 最 新 消息 </span></h3> 

<ul class="category list"><1i><a href="#"> 公 司 组 织 员工 连云港 旅游 </a></1i> 
<1i><a href="#">2011 员 工 乒乓 球 大 赛 开幕 </a></1i> 

<1i><a href="#"> 公 司 总 经 理会 见 实 习 大 学 生 </a></1i> 

<1i><a href="#"> 公 司 销售 部 门 再 传 捷报 </a></1i></ul> 
<h3><span> 产 品 展示 </span></h3> 

<ul class="recent articles"><1i><a href="#"> 在 线 人 员 素 质 考核 系统 </a></1i> 
<li><a href="#"> 线 损 计算 机 系统 </a></1i> 

<1i><a href="#"> 质 量 运用 管理 系统 </a></1i></ul> 
<h3><span> 客 户 </span></h3> 

<ul class="wet recent comments"><1i><a href="#"><cite> 华 中 地 区 </cite></ 


a><p> 河 南 地 区 </p></1i> 


于 显 


<li><a href="#"><cite> 华 东 地 区 </cite></a><p> 上 海地 区 </p></1i></ul> 
</div><!--end column--> 
<div id="content-bottom">&nbsp;</div> 


在 上 面 的 代码 中 ， 创 建 了 两 个 层 ， 分 别 为 column 层 和 content-bottom 层 。 其 中 column 层 
示 页 面 主体 中 的 右 侧 链接 ， 并 包含 了 3 个 标题 和 3 个 超级 链接 。content-bottom 层 用 于 ; 


上 面 


层 的 float 浮 动 效 果 。 
在 CSS 文 件 中 ， 用 于 修饰 上 面 HTML 标 记 的 CSS 代 码 如 下 : 


#column { 

background: rgb(142, 14, 14) url('images/column.gif') no-repeat; 
float: right; 

width: 247px; } 

#column p { font-size: 0.7em; } 

#column ul { font-size: 0.8em; } 

#column h3 { 
background: transparent url('images/h3-column.gif') no-repeat; 
position: relative; 

left: -1l8px; 

height: 26px; 
width: 215px; 
margin-top: 1l10px; 

padding-top: 6px; 
padding-left: 6px; 

font-size: 0.9em; 

z=indexs 1 

font-family: Verdana,"Geneva CE",1lucida,sans-serif; 
E 
#column h3 span { margin-left: 1l0px; } 
#column span.name { 


text-align: right; 
color: rgb(223, S58, 0)3 
margin-right: Spx; 
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colomm a 1 colors rgqb1255, 2557 255})2 } 

#column a:hover { color: rgb(80, 210, 122); } 

p-.comments { 

text-align: right; 

font-size: 0.8em; 

font-weight: bold; 

padding-right: 1l0px; 

} 

#content-bottom { 

background: transparent url('images/content-bottom.gif') no-repeat scroll 


left bottom; 


clear: both; 
display: block; 
width: 770px; 
height: 13px; 
font-size: Opt; 


} 
上 面 代码 中 ，#column 选 择 器 定义 了 背景 图 片 、 背 景 颜 色 、 页 面 右 浮动 和 宽度 。#content- 


bottom 选 择 器 定义 了 背景 图 片 、 宽 度 、 高 度 、 字 体 大 小 和 以 块 显示 ， 并 且 使 用 clear 消 除 前 面 


层 使 


float 的 影响 。 其 他 选择 器 主要 定义 column 层 中 其 他 元 素 的 显示 样式 ， 例 如 无 序列 表 样 
列表 选项 样式 和 超级 链接 样式 等 。 


ER 版 权 信息 


版 权 信息 一 般 放置 到 页 面 底部 ， 用 于 介绍 页 面 的 作者 、 地 址 信息 等 ， 是 页 脚 的 一 部 分 。 页 


脚 部 分 和 其 他 网 页 部 分 一 样 ， 需 要 保持 简单 、 清 晰 的 风格 。 在 IE9.0 中 浏览 效果 如 图 19-6 所 示 。 


置 起 


图 19-6 页 脚 部 分 


从 图 19-6 可 以 看 出 ， 此 页 脚 部 分 非常 简单 ， 只 包含 了 一 个 作者 信息 的 超级 链接 ， 因 此 设 
来 比较 方便 ， 其 代码 如 下 : 

<div id="footer"> 

<p id="ivorius"><a href="#"> 网 页 设计 者 : 李 四 工 作 室 </a></p> 

</div><!--end footer--> 

上 面 代码 中 ，footer 层 包含 了 一 个 段落 信息 ， 其 中 段落 的 id 是 ivorius。 

在 CSS 文 件 中 ， 用 于 修饰 上 面 HTML 标 记 的 样式 代码 如 下 : 


#footer { 
background: transparent url('images/footer.png') no-repeat scroll left bottom; 


margin-top: Spx; 
padding-top: 2px; 
height: 33px; 

和 


#footer p { text-align: center; } 
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fo0ter an colors rgbl255 255r 2595)2 } 
#footer a:hover { color: rgb(223, 58, 0); } 
p#ivorius { 

float: right; 

margin-right: 13px; 

font-size: 0.75em; 

p#ivorius a { color: rgb(80, 210, 122); } 


上 面 代码 中 ，#footer 选 择 器 定义 了 页 脚背 景 图 片 、 内 外 边 距 的 顶部 距离 和 高 度 。 其 他 选 
择 器 定义 了 页 脚 部 分 文本 信息 的 对 齐 方 式 、 超 级 链接 样式 等 。 


但 .3 ”整体 调整 


在 前 面 的 各 个 小 节 中 ， 完 成 了 首页 中 不 同 部 分 的 制作 ， 其 整个 页 面 基本 上 都 已 经 成 形 。 
在 制作 完成 后 ， 需 要 根据 页 面 实际 效果 作 一 些 细节 上 的 调整 ， 从 而 更 加 完善 页 面 整 体 效 果 。 
例如 各 块 之 间 的 padding 和 margin 值 是 否 与 页 面 整体 协调 ， 各 个 子 块 之 间 是 否 协调 统一 等 。 页 
面 效果 调整 前 ， 在 下 9.0 中 ， 浏 览 效果 如 图 19-7 所 示 。 


图 19-7 页 面 调整 前 效果 


从 图 19-7 中 ， 可 以 发 现 页 面 段落 没有 缩 进 ， 页 面 右 侧 列表 选项 之 间距 离 太 小 等 。 这 时 可 
以 利用 CSS 属 性 进行 调整 ， 其 代码 如 下 : 


p { margin: 0.4em 0.5em; font-size: 0.85em;text-indent:2em; } 
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a { color: rgb(25, 126, 241); text-decoration: underline; } 

a:hover { color: rgb(223, 58, 0); text-decoration: none; } 

a img { border: medium none ; } 

ul ol { margin: 0.5em 2.5em; } 

h2 { margin: 0.6em Opt 0.4em 0.4em; } 

h3, h4, h5 { margin: lem Opt 0.4em 0.4em; } 

* { margin: Opt; padding: Opt; } 

body { background: rgb(61, 62, 63) url('images/body.gif') repeat; 

color: white; font-size: lem; font-family: "Trebuchet MS",Tahoma,"Geneva 
CE", lucida7 )} 


上 面 代码 中 ， 全 局 选择 器 * 设 置 了 内 外 边 距 距 离 ，body 选 择 器 设置 了 背景 颜色 、 图 片 、 


字体 大 小 ， 字 体 颜色 和 字形 等 。 其 他 选择 器 分 别 设置 了 段落 、 超 级 链接 、 标 题 和 列表 等 样式 
信息 。 页 面 调整 后 ， 在 IE9.0 中 的 浏览 效果 如 图 19-1 所 示 。 


19.4 专家 解 惑 


1. Firefox 如 何 设 置 div 层 居中 呢 ? 
有 两 种 方式 可 以 设置 div 层 居中 。 一 是 div 样 式 属性 设置 margin-left 和 margin-right 的 值 为 
auto， 代 码 如 下 : 


margin: auto (主要 是 margin-left,margin-right) 
但 此 时 下 浏览 器 不 适用 。 二 是 body 设 置 text-align 时 ，div 样 式 属性 需要 进行 设置 ， 方 可 居中 。 


2. 如 何 设置 div 垂 直 居 中 呢 ? 
首先 使 用 代码 设置 


vertical-align:middle; 
然后 将 行距 增加 到 和 整个 div 一 样 高 ， 例 如 : 
line-height:200px; 


最 后 插入 文字 ， 就 可 以 实现 div 层 垂直 居中 了 。 但 缺点 是 要 控制 内 容 不 换行 。 
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YY 
第 20 章 


似 水 年 华 一 一 女性 个 
人 网 站 


本 章 引 言 


随 着 网 络 发 展 ， 女 性 网 站 如 雨后春笋 一 般 ， 逐 渐 成 为 网 络 世 
界 中 一 道光 彩 秀 丽 的 风景 线 。 这 些 优秀 的 女性 网 站 强烈 地 吸引 着 
越 来 越 多 的 女性 网 民 投入 到 互联 网 络 的 海洋 中 去 。 本 章 实例 将 以 
女性 网 站 为 题材 ， 介 绍 DIV 和 CSS 布 局 。 


女性 回忆 


@、 ma DIV+CSS3 msBstt 


20.1 构思 布局 


本 实例 是 一 个 介绍 女性 生活 的 个 人 网 站 ， 主 要 体现 女性 生活 的 方方面面 。 


E 体 色彩 采 


黑色 ,强调 女性 对 逝去 日 子 的 无 奈 和 生活 的 神秘 色彩 。 实 例 完成 后 ， 在 下 9.0 中 ， 浏 览 效 果 如 
图 20-1 所 示 。 


网 


20-1 女性 网 站 首页 


人 CE 设计 分 析 _ 


女性 个 人 网 站 是 女性 健康 和 情感 的 门户 ， 内 容 一 般 包 括 女 性 健康 、 时 尚 、 女 性 交友 、 女 
性 情感 、 美 容 保 健 等 。 主 要 为 女性 提供 前 沿 服饰 、 休 闲 、 娱 乐 、 健 康 等 生活 咨询 。 本 实例 重 
点 是 展现 女性 自信 和 生活 的 一 面 。 
本 网 站 是 女性 个 人 网 站 ， 其 主要 显示 区 域 用 于 显示 
志文 章 ， 同 时 浏览 者 可 以 进行 评论 。 页 面 左 侧 的 导航 
接 ， 方 便 浏览 者 快速 进入 感 兴趣 的 话题 。 


人 RE 排版 架构 


本 人 日 志 ， 在 本 区 域 可 以 编辑 和 管理 
链接 ， 对 女性 生 活 的 各 个 方面 进行 链 


从 图 20-1 页 面 效 果 可 以 看 出 ， 页 面 总 体 结构 是 上 中 下 结构 ， 即 页 头 部 分 、 页 面 主 
脚 部 分 ， 并 且 页 面 主体 部 分 又 分 为 左右 版 式 ， 左 侧 显 示 菜 单 导 航 ， 右 侧 显 示 日 志文 章 。 总 的 
来 说 ， 网 站 首页 是 一 个 混合 的 典 套 结构 。 其 页 面 效果 如 图 20-2 所 示 。 
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页 头 部 分 


页 面 主体 


页 面 左 侧 页 面 右 侧 


页 脚 部 分 


图 20-2 页 面 总 体 框架 


根据 上 面 提供 的 页 面 框架 ， 在 HTML 页 面 ， 可 以 使 用 div 层 将 上 面 框架 实现 ， 其 代码 如 下 : 


<div id="header"> 


</div> 
<div id="page"> 
<Ll==— start content ==> 
<div id="content"> 
</div> <!-- end content --> 
<div id="sidebar"> <!-- start sidebar --> 
</div> <!-- end sidebar --> 
</div><!-- end page --> 
<div id="footer"> 
</div> 


上 面 代码 中 ，ID 名 称 为 header 的 层 是 页 头 部 分 ， 此 处 可 以 显示 Logo 和 网 站 名 称 ，ID 名 称 


为 page 的 页 面 ， 是 页 面 主 休 内容， 包括 两 个 不 同 的 层 ， 即 content 层 和 sidebar 层 。 其 中 content 


层 


显示 页 面 主体 内 容 ， 即 日 志文 章 ; sidebar 层 用 于 显示 页 面 导航 链接 。footer 层 是 页 脚 部 


分 ， 用 于 显示 地 址 和 作者 信息 等 。 需 要 注意 的 是 ， 此 实例 没有 采用 页 面 整 体 布局 容器 。 


在 CSS 文 件 中 ， 对 应 page 层 的 修饰 样式 如 下 : 


#page { 
width: 760px; 
margin: 0 auto; 
| 
body { 
margin: 0; 
padding: 0; 
background: #000000; 
font=Si2e. 13DE7 
color: #8C8C8C; 
} 


上 面 代码 中 ，#page 选 择 器 定义 了 page 层 的 显示 宽度 ， 即 页 面 主体 内 容 宽度 和 外 边 距 距 离 


等 。 标 记 选 择 器 body 中 定义 了 内 外 边 距 距离 为 09、 背景 色 为 黑色 、 字 体 大 小 为 13px 以 及 字体 
颜色 等 。 
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20.2 模块 分 割 


确定 页 面 整 体 架构 和 各 个 子 块 之 后 ， 就 可 以 动手 对 网 页 各 个 部 分 进行 设计 了 。 本 实例 对 
于 整体 样式 修饰 不 是 太 复杂 。 本 节 主要 完成 各 个 子 块 的 样式 修饰 。 


人 ES 网 站 名 称 
为 了 突出 网 站 名 称 和 色彩 ， 网 站 导航 链接 没有 放 到 页 头 部 分 ， 而 是 放 到 了 页 面 主体 中 。 


本 实例 中 页 头 部 分 包括 两 个 部 分 ， 一 个 是 网 站 名 称 ， 另 一 个 是 页 面 图 片 。 图 片 和 文字 组 合 在 
一 起 ， 更 加 突出 网 站 主体 。 在 下 9.0 中 ， 浏 览 效果 如 图 20-3 所 示 。 


女性 回忆 


20-3 页 头 部 分 


根据 上 面 效果 ， 可 以 在 HIML 文 件 中 创建 并 实现 ， 其 代码 如 下 ; 


<div id="header"> 
<h1> 女 性 回忆 </h1> 
<p> 为 爱 而 狂 </p> 


</div> 


上 面 代码 中 ， 创 建 了 一 个 层 header， 并 且 层 里 面包 含 了 一 个 标题 和 一 个 段落 。 
在 CSS 文 件 中 ， 对 于 上 面 标 记 的 样式 修饰 代码 如 下 : 


#header { 
width: 760px; 
height: 280px; 
margin: 0 auto; 


background: url (images/img01.jpg) no-repeat right top; 
} 


#header hl, #header p { 
margin: 0; 
Color: #EB42A3; 

} 


#header hl { 
padding-top: 100px; 
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Tl 


上 面 代码 中 ， 拖 eader 选 择 器 定义 了 页 头 的 宽度 、 高 度 、 内 边 距 和 背景 图 等 。 其 他 选择 器 
定义 了 页 头 部 分 标题 和 段落 的 样式 ， 例 如 字体 颜色 和 内 外 边 距 等 。 


人 日志 文章 


在 页 面 主体 中 ， 右 侧 版 式 可 以 说 是 页 面 的 主要 部 分 ， 用 于 显示 日 志文 章 。 并 且 每 篇 日 志 
文章 都 可 以 进行 评论 、 管 理 和 编辑 等 。 块 的 整体 依然 采用 右 浮动 和 度 的 版 式 。 在 IE9.0 
Ph， 浏览 效果 如 图 20-4 所 示 。 


加 
问 
be 


伊甸园 日 志 


司 20-4 页 面 右 侧 内 容 


根据 图 20-4 所 示 的 页 面 效 果 ， 在 HTML 文 件 中 创建 并 实现 ， 其 代码 如 下 : 


<div id="content"> 
<div class="post"> 
<hl class="title"> 伊 甸 园 日 志 </h1> 
<p class="byline"><small>2011 年 8 月 25 发 表 <a href="#"> 管 理 员 </a> | <a 
href="#"> 编 辑 </a></small></p> 
<div class="entry"> 
<p><strong> 喜 欢 回 忆 了 么 ? </strong> 花 点 时 间 去 吧 ! 去 体验 它 ， 去 找 回 它 吧 ! <a 
href="#"> 回 忆 </a> ， 让 我 寻 回 真实 . 朋友 。</p> 
</div> 
<p class="meta"><a href="#" class="more"> 更 多 </a> gnbsp;g&nbsp; &nbsp; 
<a href="#" class="comments"> 评 论 (33)</a></p> 
</div> 
<div class="post"> 
<h2 class="title"> 花 季 </h2> 
<p class="byline"><small>2011 年 8 月 25 日 发 表 <a href="#"> 管 理 员 </a> | <a 
href="#"> 编 辑 </a></smal1></p> 
<div class="entry"> 


<p> 时 光 飞 逝 总 是 让 我 们 容易 忽视 很 多 与 青春 有 关 的 日 子 …*…</p> 
<p> 是 不 是 总 会 在 不 惑 之 年 才 开 始 回忆 过 去 的 往事 …… </p> 
</div> 


<p class="meta"><a href="#" class="more"> 更 多 </a> &nbsp; gnbsp; tnbsp; 
<a href="#" class="comments"> 评 论 (33)</a></p> 
</div> 
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</div> 


上 面 代码 中 ， 创 建 了 一 个 层 content， 用 于 包含 页 面 中 的 日 志文 章 信 息 。 在 content 层 中 ， 


落 和 超级 链接 等 信息 。 


#content { 
float: right; 
width: 460px; 


-Post 不 
padding: 0 0 20px 0; 


.flowers { 


tite 
margin: 0; 
border-bottom: 2px solid #0F0FOF; 


-byline { 
margin: 0; 
Color: #646464; 


.meta { 
text-align: right; 
Color: #646464; 


.meta .more { 


padding-left: 20px; 


.meta .comments { 
padding-left: 20px; 


再 介绍 了 。 


人 到 玫 页面 导航 


20-5 所 示 。 


又 创建 了 两 个 匿名 div， 分 别 包含 不 同 的 日 志文 章 。 并 且 每 个 匿名 div 层 中 ， 都 包含 标题 、 段 


在 CSS 文 件 中 ， 用 于 修饰 上 面 HTML 标 记 的 代码 如 下 : 


background-image: url( ‘images/img03.jpg” ) 


background: url (images/img03.gif) no-repeat left center; 


background: url (images/img04.gif) no-repeat left center; 


上 面 代 码 中 ，#content 选 择 器 定义 了 层 宽度 为 460 像 素 ， 并 且 右 浮动 显示 块 。 类 选择 器 
title 定 义 了 外 边 距 和 下 边框 显示 样式 ， 类 选择 器 meta 定 义 了 对 齐 方 式 和 字体 颜色 ， 类 选择 器 
Imore 定 义 了 左 侧 内 边 距 距离 和 背景 图 片 等 信息 。 其 他 选择 器 多 是 定义 了 背景 图 片 ， 这 里 就 不 


女性 是 感性 的 ， 不 习惯 在 页 面 中 寻找 超级 链接 ， 故 本 实例 将 所 有 页 面 导 航 链接 放 到 一 
起 ， 方 便 查找 和 发 现 。 同 样 的 ， 需 要 设置 该 块 固定 宽 


度 和 左 浮动 。 在 IE9.0 中 ， 浏 览 效果 如 图 
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~ 娱乐 
一 条 于 
-文昌 


心理 情感 


-单身 交友 (23) 
~ 六 更 辣 《91) 
~ 男 姓 廊 协 (31) 
-本 后 类 四 《30) 
> 地 染 傅 村 (31) 
~ {MB (10) 
> 明 且 人 铺 夸 (91) 
> 先 量 女性 (28) 
> 书生 活 G31) 


和 20-5 页 面 导航 


根据 图 20-5 所 示 的 页 面 效 果 ， 在 HTML 文 件 中 创建 并 实现 ， 
<div id="sidebar"> 
<ul> 
<1i> 
<h2> 女 性 生活 </h2> 
<ul> 
<1i><a href="#"> 美 容 </a></1i> 
<1i><a #"> 服 饰 </a></1i> 
<1i><a #"> 保 健 </a></1i> 
<1i><a href="#"> 娱 乐 </a></1i> 
<1i><a href="#"> 亲 子 </a></1i> 
<1i><a href="#"> 女 包 </a></1i> 
</ul> 
</1i> 
过 开 王 > 
<h2> 心 理 情感 </h2> 
<ul> 
<1i> 单 身 交友 (23)</1i> 
<1i><a href="#"> 恋 爱 部 落 </a> (31)</1i> 
<1i><a href="#"> 男 婚 女 嫁 </a> (31)</1i> 
<1i><a hre "> 家 庭 婚 姻 </a> (30)</1i> 
<1i><a hre "> 边缘 情感 </a> (31)</1i> 
<1i><a hre "> 情感 测试 </a> (30)</1i> 
<1i><a hre "> 明星 情感 </a> (31)</1i> 
<1i><a hre "> 先锋 女性 </a> (28)</1i> 
<li><a "> 书生 活 </a> (31)</1i> 
</ul> 
</Iii> 
</ul> 
</div> 
上 面 代码 中 ， 创 建 了 一 个 sidebar 层 ， 包含 超级 链接 。 在 该 层 


其 代码 如 下 : 


hh， 创建 了 标题 和 无 序 
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列表 ， 其 中 标题 作为 列表 名 称 ， 无 序列 表 作为 导航 菜单 。 
在 CSS 文 件 中 ， 对 于 上 面 HIML 标 记 进行 修饰 ， 其 CSS 代 码 如 下 : 


#sidebar { 
float: left; 
width: 240px; 

} 

#sidebar ul { 
margin: 0; 


padding: 0; 
list-style: none; 
} 
#sidebar li ul { 
padding: l5px 0; 
} 
#sidebar 1i 1i { 
padding-left: 20px; 
border-bottom: lpx dotted #0F0FOF; 
background: url(images/img02.gif) no-repeat S5px 50%; 
} 
#sidebar h2 { 
margin: 0; 
padding: 20px 0 0 0; 
border-bottom: 2px solid #0F0FOF; 
} 
#sidebar a { 
text-decoration: none; 


} 


上 面 代 码 中 ，#sidebar 选 择 器 定义 了 层 固 定 宽度 为 240px， 页 面 左 浮动 。 髓 套 选择 器 
#sidebar ul 中 定义 了 无 序列 表 显 示 样式 ， 例 如 内 外 边 距 和 无 特殊 符号 显示 。 其 中 选择 器 分 别 定 
义 了 列表 选项 、 标 题 和 超级 链接 的 显示 样式 ， 例 如 背景 色 、 边 框 样式 和 下 划 线 等 。 


作者 信息 


本 实例 页 脚 信息 比较 简单 ， 只 是 一 个 作者 信息 。 在 正 9.0 中 浏览 效果 如 图 20-6 所 示 。 


司 20-6 页 脚 信息 


在 HTML 文 件 中 ， 创 建 并 实现 上 述 效 果 ， 其 代码 如 下 : 


<div id="footer"> 
<p> 设 计 者 李 四 工 作 室 </p> 
</div> 
上 面 代码 中 ， 创 建 了 一 个 footer 层 ， 并 且 
在 CSS 文 件 中 ， 对 footer 层 的 修饰 代码 如 下 : 


中 包含 了 一 个 段落 。 


Bl 
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#footer { 
clear: both; 
padding: 30px 0; 
background: url (images/img07.gif) repeat-x; 
text-align: center; 
font-sizes smallers; 


} 


上 面 代码 中 ，#footer 选 择 器 首先 使 用 clear 属 性 消除 上 面 层 使 用 float 带 来 的 影响 ， 然 后 使 
用 CSS 属性 定义 了 内 边 距 、 背 景 图 片 、 对 齐 方式 和 字体 大 小 等 。 


203 ”整体 调整 


完成 对 各 个 子 块 的 排版 后 ， 网 站 基本 上 就 能 够 实现 了 。 最 后 还 必须 对 整体 样式 进行 调 
整 ， 例 如 细节 上 的 调整 等 。 页 面 调整 前 ， 在 下 9.0 中 浏览 效果 如 图 20-7 所 示 。 


女性 生活 


图 20-7 调整 前 样式 
CSS 调 整 代码 如 下 : 


body, th, td, input, textarea, select, option { 
font-family: "宋体 "， "Times New Roman", Times, serif; 
上 
和 区 
font-weight: normal; 
color: #CBR61R7 
} 
hi { 
letter-spacing: -2px; 
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font-size: 3em; 

} 

h2 1{ 
letter-spacing: ~1px? 
font-size: 2em; 

} 

nT 
font-size: lem; 

有 

pr Viy oF 4 
line-height: 200%; 

} 

a 
color: #3AA0B9; 

} 

a:hover { 
text-decoration: none7 
color: #EB42A3; 

’ 


上 面 代码 中 ， 定 义 了 不 同 标 记 的 显示 样式 ， 其 标记 包含 标题 hl1、h2、h3、 段 落 和 超级 链 
接 等 。 样 式 大 多 为 字体 大 小 、 字 体 颜色 、 背 景色 、 字 体 和 行 高 等 。 

页 面 调整 后 ， 可 以 发 现 字体 颜色 、 字 体 大 小 和 行 高 发 生变 化 。 在 IE9.0 中 浏览 效果 如 图 
20-1 所 示 。 


20.4 专家 解 惑 


1。， 在 Firefox 浏 览 器 下 ， 多 层 柑 套 时 内 层 设 置 了 浮动 ， 外 层 设置 背景 时 ， 为 什么 背景 不 显 
示 呢 ? 

这 主要 是 内 层 设置 浮动 后 ， 外 层 高 度 在 Firefox 下 变 为 0%， 所 以 应 该 在 外 层 与 内 层 间 再 肉 一 
层 ， 设 置 浮动 和 宽度 ， 然 后 再 给 这 个 层 设置 背景 。 

2. 在 正 浏览 器 中 ， 如 何 解决 双边 距 问 题 ? 

浮动 元 素 的 外 边 距 会 加 倍 ， 但 与 第 一 个 浮动 元 素 相 邻 的 其 他 浮动 元 素 外 边 距 不 会 加 倍 。 
其 解决 方法 : 对 此 浮动 元 素 增加 样式 display:inline。 

3. 元 素 定义 外 边 距 时 ， 应 注意 哪些 问题 ? 

在 对 元 素 使 用 绝对 定位 时 ， 如 果 需 要 定义 元 素 外 边 距 ， 应 注意 在 正 6 浏览 器 中 ， 外 边 距 不 
会 视 为 元 素 的 一 部 分 ， 因 此 在 对 此 元 素 使 用 绝对 定位 时 外 边 距 无 效 。 但 在 Firefox 浏 览 器 中 ， 
外 边 距 会 视 为 元 素 的 一 部 分 ， 因 此 在 对 此 元 素 使 用 绝对 定位 时 ， 外 边 距 有 效 ( 例 如 ，margin_ 
top 会 和 top 相 加 ) 。 
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公司 宣传 有 秘籍“ 一 <! 于 


时 尚 内 衣 网 站 


本 章 引 言 


作为 公司 的 门户 网 站 ， 其 中 主要 职能 就 是 宣传 公司 形象 ， 展 
示 产 品 。 例 如 内 衣 公司 ， 就 需要 宣传 内 衣 产 品 。 本 章 以 内 衣 时 尚 
网 站 为 例 ， 进 一 步 介绍 CSS 构 建 网 站 的 方法 。 


/Penn 


产品 展示 
魔 雪 旗下 搬 有 的 219 本 系列 为 11 年 物 特 别 
及 产品 线 包 插 : “ 魔 罕 女 限量 版 ， 采 用 欧洲 顶 纪 的 
士 " 、“ 订 奖 先 生 "、 WW 经 和 本 型、 
“ 魔 雪 儿童”、“ 魔 志 英 时 下 设计 ， 影 显 精 到 与 草 
同体 内 衣 ，“ 爱 美丽 ”、 人 贵 。 迷 彩 舌 纹 流 战 进 型 也 
“ 涯 卡 文 "“ 心 受 "， 以 | 合 辐 多 印花 ,性 二 于 
及 个 性 化 内 友和 礼服 定制 打造 专属 于 LACLDYERE 女 人 
工作 室 的 高 贷 的 野性 风格 。 
ig, 全 致力 于 为 女性 提供 健康 好 逢 .时尚 要 售 
| 一 H 让 每 一 | 
一 站 式 拱 人 玉 沪 文 性 更 加 美丽 目 倩 _ 加 
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21.1 构思 布局 


本 实例 网 站 主要 以 介绍 公司 产品 为 主 ， 采 用 图 文 混合 的 方法 ， 并 结合 内 衣 主 题 ， 主 色调 


采用 浅 色 ， 容 易 被 人 接受 。 在 Firefox 5.0 中 ， 浏 览 效果 如 图 21-1 所 示 。 


图 21-1 内 衣 时 尚 网 站 


设计 


网 站 首页 主要 采用 图 文 结 合 方式 展现 产品 ， 其 中 图 片 用 于 显示 新 产品 样式 ， 文 字 作 为 畏 
助 介绍 。 结 合 内 衣 行 业内 衣 款 式 不 断 变化 的 情况 ， 网 站 在 页 面 主体 的 页 面 导航 部 分 ， 用 于 新 


产品 的 展示 。 


页 面 主体 部 分 分 为 品牌 形象 、 产 品 展示 和 内 衣 欣 赏 等 栏目 ， 各 个 栏目 都 配 有 图 片 ， 浅 蓝 


色 背 景 ， 让 页 面 在 浅 色 下 不 失 高 雅 、 整 洁 和 大 方 。 页 面 导 航 链接 在 页 头 部 分 显示 ， 作 为 链接 


其 他 页 面 的 依据 。 对 于 公司 信息 ， 可 以 在 页 脚 部 分 进行 链接 。 


《CE 排版 架构 


网 站 首页 的 排版 ， 包 括 Logo 图 片 、 导 航 菜单 、 左 侧 版 式 的 新 产品 
形象 、 内 衣 欣 赏 和 产品 展示 等 。 其 框架 如 图 21-2 所 示 。 


展示 、 右 侧 版 式 的 品牌 
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页 头 部 分 


页 面 右 侧 上 而 
页 面 左 侧 


页 面 右 傅 下 面 


页 名 部 分 


图 21-2 页 面 框架 


从 图 21-2 所 示 框 架 图 可 以 看 出 ， 页 面 总 体 是 上 中 下 结构 ， 页 面 3 
主体 右 侧 又 采用 上 下 版 式 ， 相 对 于 前 面 的 实例 ， 其 排版 有 点 复杂 。 结 合 框架 图 ， 在 HIML 


文件 中 ， 使 用 div 实 现 上 面 的 架构 ， 代 码 如 下 : 


<div class="main"> 
<div class="head"> 
<div class="menu"> 
</div> 
</div> 
<div class="middmain"> 
<div class="middmaintop"></div> 
<div class="leftmain"> 
</div> 
<div class="rightmain">> 
<div class=" rightmaintopleft "> 
</div> 


<div class="rightmaintopleft" style="float:right"> 


</div> 
<div class="1itle"” /> 内 衣 欣赏 </div> 
</div> 
</div> 
</div> 
<div class="buttom"></div> 
</div> 
</body> 
</html> 


E 体 采用 左右 版 式 ， 但 页 


/* 页 面 布局 容器 */ 
/* 页 头 部 分 */ 
/* 页 头 部 分 */ 


/* 页 面 主体 左 侧 部 分 */ 


/* 页 面 主体 右 侧 部 分 */ 
/* 页 面 主体 右 侧 上 面 */ 


/* 页 面 主体 右 侧 上 面 */ 
/* 页 面 主体 右 侧 下 面 */ 


/* 页 脚 部 分 */ 


上 面 代码 中 ， 各 个 div 层 对 应 不 同 的 框架 区 域 ， 这 里 没有 采用 ID 作 为 div 层 标识 符 ， 可 以 
使 用 类 选择 器 作为 其 标识 符 。main 层 用 作 布 局 容器 ， 用 于 放置 所 有 的 HTML 元 素 ; head 层 和 


menu 层 共同 组 成 页 头 部 分 ，head 层 


于 显示 Logo 图 片 ，mennu 


层 显 示 导 航 菜单 。middmain 层 是 


页 面 主体 容器 ， 


于 存放 页 面 主体 的 各 个 元 素 。leftmain 层 是 页 面 主体 左 侧 部 分 ， 用 于 新 产品 


展示 ; rightmaintopleft 层 用 于 显示 页 面 主体 右 侧 上 面 的 内 容 ， 这 里 面 有 两 个 层 使 用 这 样 的 样 


式 ， 这 两 个 层 水 平 左 右 版 式 排列 。title 层 用 于 显示 页 面 主体 右 侧 下 面 的 内 容 ， 即 内 衣 欣 赏 栏 


。buttom 层 是 页 脚 部 分 。 
在 CSS 文 件 中 ， 对 


-mainf{ 


于 上 面 的 布局 容器 main 和 middmaintop 等 ， 其 样式 代码 如 下 : 
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background:#DEF1F8; 

width:775px; 

margin:0 auto; 

border:lpx #000 solid; 

overflow:hidden;} 
.middmain{ 

float:left; 


width:775px; 
} 
-middmaintop{ 
width:775px; 
height:20px; 
float:left;} 


background:url (img/maintitle2.jpg); 


左 浮动 。 


页 面 导 航 和 Logo 图 片 


Firefox 5.0 中 浏览 效果 如 图 21-3 所 示 。 


徊 效果 的 HTML 代 码 如 下 : 


上 面 代 码 中 ， 类 选择 器 main 定 义 了 


层 宽 


图 


当 鼠 标 放 到 导航 菜单 的 超级 链接 上 ， 其 字体 颜色 会 发 4 


魔 姿 内 衣 店 


21-3 页 头 部 分 


度 为 775px、 边 框 样式 、 外 边 距 和 背景 色 。 类 选 
择 器 middmain 定 义 了 页 面 宽度 、 背 景 图 和 左 浮动 。 类 选择 器 middmaintop 定 义 了 宽度 、 高 度 和 


21.2 模块 分 害 


在 确定 页 面 的 各 个 块 与 子 块 后 ， 就 可 以 对 网 页 的 各 个 部 分 着 手 设计 了 。 实 例 中 块 的 整体 
布局 样式 这 里 就 不 再 介绍 了 ， 前 面 小 节 已 经 介绍 过 。 


此 处 的 页 面 导 航 菜单 ， 采 用 了 项 目 列表 实现 。 将 <ul> 标 记 和 <li> 标 记 进行 相应 的 设置 ， 
使 得 菜单 能 够 显示 在 同一 行 上 面 。 页 面 Logo 非 常 简单 ， 只 是 在 图 片上 显示 了 网 站 名 称 。 在 


E 变 化。 在 HIML 文 件 中 ， 实 现 上 
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<div class="head"> 

<div class="menu"> 

< > 

<1i style="width:80px;"></1i> 


<1i ><a href="#"> 首 页 </a> </1i> 
<li ><a href="#"> 魔 次 简介 </a> </1i> 
<1i ><a href="#"> 品 牌 形象 </a></1i> 
<1i ><a href="#"> 产 品 展示 </a> </1i> 
<1i ><a href="#"> 招 商 加 盟 </a> </1i> 
<li ><a href="#"> 客 户 服务 </a> </1i> 
</ul> 
</div> 
</div> 
上 面 代 码 中 ， 定 义 了 两 个 层 head 和 menu， 其 中 head 
无 序列 表 ， 列 表 宽度 使 用 CSS 代 码 定义 为 80px。 
在 Css 文件 中 ， 对 于 上 面 标记 的 样式 修饰 代码 如 下 ， 
.head{ 
overflow:hidden; 
width:775px; 
background:url (img/21.jpg); 
height:336px; 
float:left;} 
.menut{ 
height:56px; 
float:left; 


padding-left:240px; 

} 

.menu 1if{ 
padding-top:20px; 
font-size:14px; 
Color:#FFF; 
font-weight:bold; 
width:75px; 
float:left; 


.menu ul li ai{ 
color:#ddeecc; 
display:block; 
border:lpx solid #AE9956; 
background-color:#AE9956; 
} 
-menu ar .menu a:vistied, .menu a:link{ 
text-decoration:none; color:#fff;} 
.menu a:hovert{ 


Color:#F0C; text-decoration:underline; 


层 包 含 menu 层 。menu 层 中 创建 了 一 个 


上 再 
定义 了 


代码 中 ， 类 选择 器 head 定 义 了 层 宽 


度 、 高 度 、 


层 高 度 、 左 浮动 和 左 侧 内 边 距 。 嵌 套 选择 器 menu li 定义 了 列表 选项 字体 大 小 、 宽 度 


左 浮动 和 背景 图 片 ， 类 选择 器 menu 


过、 
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字体 颜色 、 上 侧 内 边 距 和 左 浮动 。 其 他 选择 器 定义 了 列表 选项 的 超级 链接 样式 ， 例 如 鼠标 悬 
EA 新 产品 展示 

为 了 方便 浏览 者 快速 把 握 新 产品 动态 ， 在 首页 专门 开辟 了 一 个 新 产品 专栏 ， 位 于 页 面 主 
体 中 的 左 侧 部 分 。 在 Firefox 5.0 中 浏览 效果 如 图 21-4 所 示 。 


| 3 


图 21-4 新 产品 展示 


根据 图 21-4 所 示 的 页 面 效 果 ， 在 HTML 文 件 中 实现 。 其 代码 如 下 : 


<div class="leftmain"> 
<div class="leftmaindiv"> 
<div class="]litle"><img src="img/ltitlekuai.jpg" border="0" 
/> 内 衣 新 款 介绍 </div> 
<div class="leftmainpic"> 
<a href="#"><img src="img/35.jpg" border="0" /></a><br /> 
<p style="text-align:center;"> 幻 金 迷 城 </p> 
</div> 
</div> 
</div> 


上 面 代码 中 ， 定 义 了 leftmain 层 和 leftmiandiv 层 作为 页 面 主体 左 侧 布局 容器 ， 在 
leftmaindiv 层 中 包含 了 title 层 和 leftmainpic 层 ， 其 中 title 层 用 于 显示 左 侧 栏目 标题 ; leftmainpic 
层 用 于 显示 图 片 信息 和 文本 信息 。 

在 CSS 文 件 中 ， 对 于 上 面 HTML 标 记 的 样式 代码 如 下 : 


.leftmain{ 
width:220px; 
padding-right:30px; 
padding-left:20px; 
float:left; 
} 
-leftmaindiv{ 
background:#f9f8cb; 
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width:208px; 
border:lpx #FFF solid; 
} 

-leftmainpict{ 
font-size:12px; 
width:208px; 
float:left; 
padding:10px 0;} 

.leftmainpic a img{ 

float:left; 
padding-left:8px; 

’ 

.leftmainpic pt{ 
text-align:center; 
font-size:12px; 

E 

rh i 

font-size:14px; 
font-weight:bold; 
width:208px; 
float:left; 
height:28px; 
background:#FFF; 
line-height:28px; 

} 

litle img{ 

float:left; 
height:28px; 

} 


上 面 代码 中 ， 类 选择 器 leftmain 中 定义 了 层 宽度 、 左 右 侧 内 边 距 和 页 面 左 浮动 。 类 选择 
器 leftmaindiv 定 义 了 背景 色 、 宽 度 和 边框 样式 ; 选择 器 leftmainpic 定 义 了 字体 大 小 、 宽 度 、 
浮动 和 内 边 距 等 。 类 选择 器 litle 定 义 了 字体 大 小 、 字 体 样 式 、 宽 度 、 浮 动 、 高 度 、 背 景色 和 
行 高 等 。 其 他 选择 器 在 上 面 选择 器 的 基础 上 ， 对 其 包含 元 素 进 行 样式 设计 ， 例 如 对 齐 方式 、 
高 度 等 。 


品牌 形象 和 产品 展示 栏目 


在 页 面 主体 右 侧 部 分 上 面 ， 品 牌 形 象 和 产品 展示 栏目 处 于 主要 地 位 。 二 者 采用 左右 版 式 
结构 ， 水 平 排列 在 版 面 上 。 块 的 整体 实现 采用 了 浮动 和 固定 宽度 的 版 式 。 在 Firefox 5.0 中 浏览 
效果 如 图 21-5 所 示 。 
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图 21-5 页 面 主体 右 侧 


在 HTMIL 文 件 中 实现 图 21-5 所 示 的 页 面 效 果 ， 其 代码 如 下 : 


<div class="rightmain"> 
<div class="rightmaintopleft"> 
<div class="lefttitle"> 品 牌 形象 </div> 
<img src="img/xian.jpg" border="0" style="width:230px; float:left;"> 
<div class="leftmaintopleftcontent"><a href="#"><img src="img/5.jpg" 
border="0" style="float:left; padding-top:1l0px;" ></a><font > 
魔 姿 旗 下 拥有 的 品牌 及 产品 线 包 括 : “ 魔 姿 女士 ”、“ 魔 姿 先生 ”、“ 魔 姿 儿 童 ”、“ 魔 姿 美 体内 
衣 ”，“ 爱 美丽 ”、“ 兰 卡 文 ”、“ 心 爱 ”， 以 及 个 性 化 内 衣 和 礼服 定制 工作 室 。</font> 
<div class="downcontent"> <a href="#"> 独 享 魔 姿 内 衣 品 牌 , 穿 出 性 感 , 穿 出 自信 , 穿 出 
健康 , 自主 研发 生产 ,平民 的 价格 , 一流 的 质量 ,一 站 式 供 货 。 ! </a> </div> 
</div> 
</div> 
<div class="rightmaintopleft" style="float:right"> 
<div class="lefttitle"> 产 品 展示 </div> 
<img src="img/xian.jpg" border="0" style="width:230px; float:left;"> 
<div class="leftmaintopleftcontent"><a href="#"><img src="img/6.jpg" 
border="0" style="float:left; padding-top:1l0px;" ></a><font > 
本 系列 为 11 年 得 特别 限量 版 ， 采 用 欧洲 项 级 的 刺绣 花边 ， 经 典 的 杯 型 、 颜 色 设计 ， 彰 显 精致 与 尊 
贵 。 炫 彩 蟒 纹 流 线 造型 配合 暗 纹 印花 ， 性 感 魅惑 ， 打 造 专属 于 LRCLOVER 女 人 的 高 贵 的 野性 风格 。 
</font> 
<div class="downcontent"> <a href="#"> 致 力 于 为 女性 提供 健康 舒适 , 时 尚美 
体 的 高 性 价 比 内 衣 商 品 和 服务 .努力 让 每 一 位 东方 女性 更 加 美丽 自信 .</a> </div> 
</div> 
</div> 
</div> 


上 面 代码 中 ， 创 建 了 多 个 div 层 ， 其 中 比较 重要 的 是 使 用 类 选择 器 rightmaintopleft 修 
饰 的 层 。 这 两 个 层 分 别 是 图 21-5 中 的 品牌 形象 和 产品 展示 。lefttitle 层 主要 存放 栏目 标题 ， 
leftmaintopleftcontent 层 用 于 包含 文本 介绍 信息 ，downcontent 层 用 于 包含 链接 信息 。rightmain 
层 是 页 面 主体 右 侧 布局 容器 。 

在 CSS 文 件 中 ， 对 于 上 面 HTML 标 记 ， 其 样式 代码 如 下 : 


.rightmainf{ 
width:490px; 
float:left; 

} 

.rightmaintopt{ 
width:490px; 
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float:left; 
padding-bottom:20px; 
} 
.rightmaintopleft{ 
width:230px; 
float:left; 
height:270px;} 
.lefttitle{ 
font-size:14px; 
width:220px; 
float:left; 
height:28px; 
line-height:28px; 
padding-left:10px; 
font-weight:bold; 


} 

.leftmaintopleftcontent{ 
width:230px; 
float:left; 

} 

.leftmaintopleftcontent 上 ff 

font-size:12px; 

float:left; 
line-height:20px; 
padding-top:10px; 
width:132px; 
padding-left:]10px; 

} 

.downcontent{ 
width:228px; 
float:left; 
font-size:12px; 
line-height:20px;} 
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ont{ 


.downcontent a,.downcontent a:vistied, .downcontent a:link{ 


text-decoration:none; 
.downcontent a:hovert{ 
Color:#666; 


上 面 代 码 中 ， 类 选择 器 rightmain 定 义 


color:#000;} 


text-decoration:underline;} 


层 宽度 和 左 浮动 ; 


层 rightmaintop 定 义 页面 宽 度 、 左 


浮动 和 底部 内 边 距 ， 层 rightmaintopleft 定 义 页 面 宽 度 、 高 度 和 左 浮动 ; 层 lefttitle 定 义 字体 大 
小 、 宽 度 、 左 浮动 、 高 度 、 行 高 、 字 体 样式 和 左 侧 内 边 距 。 其 他 选择 器 分 别 定义 了 段落 、 字 
体 的 样式 等 。 
内衣 欣 赏 

在 页 面 主体 右 侧 部 分 下 面 ， 是 内 衣 欣 赏 栏目 。 内 衣 欣 赏 栏目 实际 上 是 一 个 图 片 栏目 ， 将 
比较 有 代表 性 的 图 片 在 该 栏目 展示 ， 用 于 吸引 人 的 目光 。 图 片 展示 同样 采用 无 序列 表 ， 即 将 
图 片 作 为 列表 选项 。 在 Firefox 5.0 中 浏览 效果 如 图 21-6 所 示 。 
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图 21-6 内 衣 欣 赏 栏目 


在 HIMIL 文 件 中 ， 实 现 图 21-6 所 示 的 页 面 效果 。 其 HTML 代 码 如 下 所 示 。 


<div class="litle" style="width:490px;"><img src="img/ltitlekuai. 
jpg" border="0" height="28" style="float:left;" /> 内 衣 欣 赏 </div> 

<div class="pic"> 

<ul><1li><div style="width:116px"><a href="#"><img src="img/7.jpg" 
border="0"></a></div></1i><li><div style="width:116px"><a href="#"><img 
src="img/8.jpg" border="0"></a></div></1i><li><div style="width:116px"><a 
href="#"><img src="img/9.jpg" border="0"></a></div></1i><li><div 
style="width:116px"><a href="#"><img src="img/10.jpg" border="0"></a></div></ 
li></ul> 

</div> 


在 上 面 代码 中 ， 创 建 了 两 个 div 层 ，litle 层 用 于 包含 页 面 栏目 标题 。pic 层 用 于 显示 产品 图 
片 ， 其 图 片 在 列表 中 显示 ， 图 片 宽度 为 116px。 
在 CSS 文 件 中 ， 对 上 面 标记 进行 修饰 ， 其 代码 如 下 ; 


=pEct 
width:490px; 
height:118px; 
float:left; 
padding-top:10px; 
1 
.pic ul{ 
width:490px; 
list-style-position:outside; 


网 


} 

-DEGSEE! 
padding-right:6px; 
float:left; 
list-style-type:none; 
list-style-position:outside; 


1 
上 面 代码 中 ， 类 选择 器 pic 定 义 了 层 宽度 、 高 度 、 左 浮动 和 项 部 内 边 距 ， 嵌 套 选择 器 pic ul 
定义 了 无 序列 表 宽度 和 样式 显示 位 置 ， 嵌 套 选 择 器 pic li 定义 了 右 侧 内 边 距 、 左 浮动 、 无 符号 
显示 等 。 


公司 信息 


本 实例 的 公司 信息 显示 在 页 脚 部 分 ， 方 便 浏 览 者 查看 ， 当 然 其 版 权 信息 和 作者 信息 也 是 
在 这 个 地 方 显 示 。 在 Firefox 5.0 中 浏览 效果 如 图 21-7 所 示 。 
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关于 我 们 | 网 站 地 图 | 诚 聘 英才 | 零售 店 址 | 网 站 联盟 | 网 店 代理 
CopyRight 2011-2019@MzChina. Al Rights Reserved 


妈 21-7 公司 信息 


在 HIMIL 文 件 中 ， 实 现 上 述 效 果 ， 其 代码 如 下 : 


<div class="buttom"><a href="#"> 关 于 我 们 </a> | <a href="#"> 网 站 地 图 </a> 
| <a href="#"> 诚 聘 英才 </a> | <a href="#"> 零 售 店 址 </a> | <a href="#"> 网 站 联盟 </a> 
1 <a href="#"> 网 店 代理 </a> 
<br>CopyRight 2011-2019@MzChina.All Rights Reserved 
</div> 


在 上 面 代码 中 ， 创 建 了 一 个 div 层 ， 用 于 包含 页 脚 信息 。 层 里 面包 含 了 多 个 超级 链接 ， 例 
如 使 用 超级 链接 显示 常见 的 公司 信息 等 。 
在 CSS 文 件 中 ， 对 于 上 面 HTML 标 记 进 行 修饰 ， 其 代码 如 下 : 


.buttom{ 
float:left; 
font-size:12px; 
width:775px; 
padding-top:15px; 
text-align:center; 
line-height:20px;} 
.buttom a,.buttom a:vistied, .buttom a:link{ 
text-decoration:none; color:#000;} 
.buttom a:hovert{ 
Color:#666; text-decoration:underline;} 


在 上 面 代码 中 ， 类 选择 器 buttom 定 义 了 页 面 左 浮动 、 字 体 大 小 、 宽 度 、 顶 部 内 边 距 、 对 
齐 方式 和 行 高 等 。 其 他 选择 器 定义 了 超级 链接 显示 样式 ， 例 如 访问 、 激 活 和 悬浮 样式 。 


21.3 ”整体 调整 


通过 对 上 面 各 个 子 块 的 排版 ， 整 个 网 站 到 此 时 就 基本 完成 了 。 最 后 必须 对 页 面 整体 进行 
查看 ， 细 节 上 作 小 的 调整 。 页 面 调整 前 后 效果 相差 不 大 ， 这 里 就 不 再 单独 显示 调整 前 的 效果 
了 。 对 页 面 调整 的 代码 如 下 : 


margin:0; 
padding:0;} 
.body{ 
font-size:12px; 
color:#000; 
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font-family:" 宋 体 ";} 
=D LE 
list-style-type:none;} 
上 面 代码 中 ，* 全 局 选择 器 定义 内 外 边 距 距 离 都 为 0%，body 选 择 器 定义 了 字体 大 小 、 字 体 
颜色 和 字体 等。 
调整 后 页 面 效果 ， 在 Firefox 5.0 中 ， 浏 览 如 图 21-1 所 示 。 


21.4 专家 解 惑 


1. Firefox 和 IE 浏 览 器 ， 如 何 处 理 负 边 界 问题 ? 

在 下 浏览 器 中 ， 对 于 超出 父 元 素 的 部 分 会 被 父 元 素 覆 盖 ， 而 在 Firefox 浏 览 器 中 ， 对 于 超 
出 父 元 素 的 部 分 会 覆盖 父 元 素 ， 但 前 提 是 父 元 素 有 边框 或 内 边 距 ， 不 然 负 边 距 会 显示 在 父 元 
素 上 ， 使 得 父 元 素 拥有 负 边 距 。 在 进行 网 页 设计 时 ， 针 对 上 面 的 情况 可 以 对 元 素 进行 相对 定 
位 。 

2. 在 定义 子 元 素 的 上 边 距 时 ， 如 果 超出 元 素 高 度 ， 怎 么 处 理 ? 

在 下 浏览 器 中 ， 子 元 素 上 边 距 显示 正常 ， 而 在 Firefox 浏 览 器 中 ， 子 元 素 上 边 距 显示 在 父 元 
素 上 方 。 其 解决 办 法 是 在 父 元 素 中 增加 overflow:hidden 语 句 或 给 父 元 素 增加 边框 或 内 边 距 。 


传承 文化 一 一 文 


化 宣传 类 网 站 


本 章 引言 


在 众多 网 站 中 ， 用 于 介绍 诗歌 、 小 说 和 文化 的 网 站 是 其 中 的 
一 种 题材 。 这 种 网 站 一 般 都 给 人 以 整洁 和 大 方 的 感觉 ， 其 内 容 主 
题 比 较 单 一 。 本 章 将 以 一 个 介绍 文化 的 网 站 为 例 ， 进 一 步 介绍 DIV 
和 CSS 布 局 。 


六 主攻 之 列 " 未 所 括 二 节 的 短 久 ， 四 上 这 
利和 动人 提 有 技 寺 性 和 中 住 。 
ht 


@、 wma DIV+CSS3 网 布局 与 样式 


《ZE 设计 分 析 


图 22-1 文化 宣传 网 站 


构思 布局 


文化 是 一 个 群体 ， 例 如 可 以 是 国家 、 


将 整个 页 面 衬托 出 来 ， 显 得 主 次 分 明 。 


《SEN 排版 架构 


整个 页 面 框架 采用 上 中 下 总 体 结构 
Logo、 网 站 名 称 、 页 面 导航 、 人 文中 国 


22-2 所 示 。 


、 站 点 搜索 、 文 化 天 地 和 文化 热点 等 。 其 框架 如 


本 实例 以 文化 宣传 为 中 心 ， 介 绍 人 文中 国 、 山 水 文化 、 文 化 天 地 、 文 化 热点 、 旅 游 文 
化 、 美 食 文化 和 建筑 文化 等 栏目 。 在 IE9.0 中 ， 浏 览 效果 如 图 22-1 所 示 。 


也 可 以 是 民族 、 企 业 和 家 庭 等 ， 在 一 定时 期 内 形成 
的 思想 、 理 念 、 风 俗 和 习惯 ， 及 由 这 个 群体 整体 意识 所 衍生 出 来 的 一 切 活动 。 此 类 网 站 的 作 
朋 就 是 宣传 文化 资料 ， 用 于 教育 和 引导 浏览 者 。 

页 面 左 右 放置 了 多 个 超级 链接 ， 方 便 浏 览 者 查看 自己 喜欢 的 内 容 ， 风 格 上 则 配合 整体 的 
页 面 设计 ， 白 色 背 景 配 合 浅 色 边框 ， 将 文化 的 简洁 性 和 传承 性 一 一 体现 。 


整个 版 面 采 用 固定 宽度 且 居 中 的 版 式 ， 对 于 大 显示 器 的 用 户 ， 两 边 将 显示 浅 灰色 背景 ， 


， 页 面 主 体内 容 版 式 采用 左 中 右 的 版 式 ， 主 要 包括 


图 | 
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页 头 部 分 


主体 主体 主体 
左 侧 内 容 右 侧 
页 脚 部 分 


从 图 22-2 中 可 以 看 出 ， 版 式 采用 柑 套 版 式 。 在 HTML 文 件 中 


块 的 划分 。 其 代码 如 下 : 


<div id="wrap"> 
<div id="header"> 


</div> 

<div id="leftside"> 
</div> 

<div id="extras"> 
</div> 


<div id="content"> 
<div class="post"> 
</div> 

<div class="post"> 
</div> 

</div> 

<div id="footer"></div> 
</div> 

</body> 

</html> 


上 面 代码 中 ， 


图 22-2 页 面 框架 图 


证 


div 层 实现 上 面 各 个 子 


/* 页 头 部 分 */ 
/* 页 面 主体 左 侧 */ 
/* 页 面 主体 右 侧 */ 


/* 页 面 主体 中 间 部 分 */ 
/* 页 面 主体 中 间 部 分 上 */ 


/* 页 面 主体 中 间 部 分 下 */ 


/* 页 脚 部 分 */ 


层 wrap 是 布局 容器 ， 用 于 存放 页 面 中 所 有 的 HTML 元 素 ; 层 header 是 页 头 
部 分 ， 存 放 网 站 名 称 和 Logo; 层 leftside 是 页 面 主体 左 侧 部 分 ，F 


于 存放 页 面 导航 菜单 ; 


层 


content 是 页 面 主体 中 间 部 分 ， 用 于 存放 文本 信息 ; 层 extras 是 页 面 主体 右 侧 部 分 ， 包 括 页 面 搜 


层 footer 是 页 脚 部 分 ， 存 放 作者 信息 等 。 


在 CSS 文 件 中 ， 对 于 布局 容器 wrap 的 样式 代码 如 下 : 


索 和 导航 菜单 等 ; 
#wrap { 
margin: Opt auto; 


background-color: 
color: 
width: 
直 


rgb(48, 48, 48); 
760px; 


上 面 代码 中 ， 定 义 了 布局 容器 wrap 中 的 样式 ， 例 如 宽度 、 颜 色 、 


rgb (255， 


255, 


255); 


背景 色 和 外 边 距 等 。 
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22.2 模块 分 审 


整体 框架 确定 好 后 ， 就 可 以 对 个 子 块 进行 设计 了 。 各 个 子 块 完 成 后 ， 还 需要 对 整体 样式 
进行 调整 。 


《ZE 页 头 部 分 


本 实例 的 页 头 部 分 ， 包 括 两 个 部 分 ， 一 个 是 网 站 名 称 ， 另 一 个 是 页 头 背景 图 片 ， 相 当 于 
页 面 Logo。 其 效果 如 图 22-3 所 示 。 


中 国文 化 


图 22-3 页 头 部 分 


在 HTML 文 件 中 ， 实 现 上 面 效 果 的 代码 如 下 : 


<div id="header"> 

<hl><span lang="zh-cn"> 中 国文 化 </span></hl1> 

</div> 

<img id="frontphoto" src="images/5d.jpg" alt="" height="175" width="760" /> 


上 面 代码 中 ， 创 建 一 个 div 层 和 图 片 img， 其 中 div 层 中 包含 了 一 个 标题 。 
在 CSS 文 件 中 ， 对 于 上 面 标记 的 CSS 代 码 如 下 ;: 


#header { margin: 10px Opt Opt; } 
#header hl{ 

margin: Opt Opt lOpx; 
background-color: inherit; 

color: rgb(80, 80, 80); 

float: left; 

font-size: 2em; 

letter-spacing: -lpx; width: 350px; 

} 

#frontphoto { margin: Opt Opt 1l0px; } 


上 面 代码 中 ， 选 择 器 header 定 义 了 外 边 距 距离 ， 选 择 器 header hl 定义 了 标题 显示 样式 ， 
例如 外 边 距 、 背 景色 、 字 体 颜色 、 左 浮动 、 字 体 大 小 和 字符 间距 等 。 选 择 器 frontphoto 定 义 了 
图 片 显示 位 置 ， 例 如 外 边 距 等 。 
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人 多 到 王 左 侧 部 分 


页 面 主体 内 容 版 式 分 为 左 中 右 版 式 ， 此 小 节 首 先 介绍 主体 内 容 左 侧 部 分 。 左 侧 部 分 用 了 
显示 导航 菜单 ， 例 如 链接 不 同类 别 的 文化 栏目 。 其 显示 采用 了 固定 宽度 和 左 浮动 的 方式 。 在 
焉 9.0 中 ， 浏 览 效果 如 图 22-4 所 示 。 


于 


首页 
民间 文化 
美食 文化 
旅游 
宗教 
艺术 
建筑 文化 


图 22-4 左 侧 导航 菜单 


在 HIML 页面 中 ， 实 现 上 面 效 果 的 代码 如 下 : 


<div id="leftside"> 

<h2 class="hide">Main menu:</h2> 

<ul class="page"> 

<1li class="page item"><a href="#" title="Page 1"> 首 页 </a></1i> 
<1i class="page item"><a href="#" title="Page 1"> 民 间 文 化 </a></1i> 
<1i class="page item"><a href="#" title="Page 2"> 美 食 文 化 </a></1i> 
<1i class="page item"><a href="#" title="Page 2"> 旅 游 </a></1i> 
<1i class="page item"><a href="#" title="Page 2"> 宗 教 </a></1i> 
<1i class="page item"><a href="#" title="Page 2"> 艺 术 </a></1i> 
<li class="page item"><a href="#" title="Page 2"> 建 筑 文化 </a></1i> 
</ul> 

</div> 


上 面 代码 中 ， 创 建 了 一 个 div 层 ， 层 中 包含 了 一 个 标题 和 一 个 无 序列 表 ， 无 序列 表 显 示 导 
航 菜单 。 
在 CSS 文 件 中 ， 对 于 上 面 标 记 进行 修饰 ， 其 代码 如 下 : 


#1leftside { margin: Opt Opt Spx; clear: left; float: left; line-height: 
1.4em; width: 140px; } 

#leftside p, #leftside ul, #leftside div.textwidget, #extras p, #extras 
ul, #extras div.textwidget { margin: Opt Opt 1l8px; font-size: 0.9em; 

} 

#1ieftside 1i, #extras 1i { margin: Opt Opt 6px; line-height: 1.2em; list— 
style-type: none list-style-image: none; list-style-position: outside; } 

#leftside ul ul, #extras ul ul { margin: 6px Opt Opt lOpx; } 

#leftside ul ul 1i, #extras ul ul li { margin: Opt Opt 4px; } 

#1leftside ul ul 1i a, #extras ul ul li a { font-weight: normal; } 

#leftside ul.linklist, #extras ul.linklist { font-size: lem; } 
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#1leftside ul.linklist ul, 
#leftside ul.linklist ul li av 


bold; } 


#leftside h2, #leftside ul.linklist 1i h2, 
#extras ul.linklist 1i h2, 


color: inherit; color: 


#leftside label, #extras label { display: none; 

-hide { display: none; } 

上 面 代码 中 ， 选 择 器 leftside 定 义 了 外 边 距 、 行 高 、 宽 度 和 左 浮动 ， 并 使 用 clear 属 性 消除 
上 面 属性 float 的 影响 。 其 他 选择 器 分 别 定 义 了 无 序列 表 选 项 和 超级 链接 的 显示 样式 。 


ZR 部 分 


网 页 主体 内 容 右 侧 部 分 ， 自 上 而 下 包含 三 个 栏目 ， 


即 站 点 搜索 、 文 化 天 地 和 文化 热点 。 其 中 站 点 搜索 用 


于 浏览 者 在 站 内 搜索 自己 喜欢 的 文章 ， 此 处 使 用 表单 创 


建 ; 下 面 两 个 栏目 都 是 使 用 无 序列 表 创 建 。 在 IE9.0 中 ， 


浏览 效果 如 图 22-5 所 示 。 


在 HIML 文 件 中 ， 实 现 上 面 效 果 的 代码 如 下 : 


<div id="extras"> 


<h2> 站 点 搜索 </h2> 


<form method="get" id="searchform" action="#"> 


<div> 


<label for="s"> 查 询 </label> 
<input value="" name="s" id="s" size="14"” type="text" /> 
<input id="searchsubmit" value="Search" type="hidden" /> 


</div> 
</form> 
<h2> 文 化 天 地 </h2> 
<ul> 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 


title="News1"> 文 化 视界 </a> 
title="News1"> 文 化 遗产 </a> 
title="Newsl"> 文 化 要 闻 </a> 
title="Newsl"> 人 文中 国 </a> 


<br 
<br 
<br 
<br 


#extras ul.linklist ul { margin: Opt Opt l8px; } 
#extras ul.linklist ul li a { font-weight: 


#leftside h3, #extras h2, 
#extras h3 { margin: Opt Opt 1l0px; background- 


rgb(80, 80, 80); font-size: 1.2em; } 


站 点 搜索 


中 国文 人 之 根 


图 22-5 主体 右 侧 部 分 


/< 
je 
/></1i> 
/></1i> 
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<li><a href="#"” title="News1l"> 走 遍 中 国 </a> <br /></1i> 
<1i><a href="#"” title="News1"> 文 化 人 物 </a> <br /></1i> 
</ul> 
<h2> 文 化 热点 </h2> 
<ul> 
<li><a href="#"” title=" 易 经 热 分 析 "> 易 经 热 分 析 </a></1i> 
<li><a href="#"” title=" 侨 家 文化 回归 "> 儒家 文化 回归 </a></1i> 
<1i><a href="#"” title=" 再 论 中 国 隐士 文化 "> 再 论 中 国 隐士 文化 </a></1i> 
<1i><a href="#"” title=" 中 国文 化 之 根 --- 和 祭祀 文化 "> 中 国文 化 之 根 --- 
祭祀 文化 </a></1i> 
</ul> 
</div> 


在 上 面 代码 中 ， 首 先 创建 了 一 个 层 div， 其 名 称 为 extras。 里 面包 含 了 表单 信息 、 无 序列 
表 和 标题 的 元 素 。 
在 CSS 文 件 中 ， 对 于 上 面 标记 的 修饰 代码 如 下 : 


#extras { 

margin: Opt Opt Spx; 

float: right; 

line-height: 1.4em; 

width: 140px; 

} 

#s { 

border: lpx solid rgb(204, 204, 204); 
margin: Opt Opt l6px; 

padding: 4px; 

background-color: rgb(255, 255, 255); 
color: rgb(80, 80, 80); 

font-size: 0.9em; 

width: 130px; } 


上 面 代码 中 ， 选 择 器 #extras 定 义 了 层 的 宽度 、 行 高 、 右 浮动 和 外 边 距 等 。#s 选 择 器 定义 
了 表单 元 素 显示 样式 ， 例 如 边框 样式 、 外 边 距 、 内 边 距 、 背 景色 、 字 体 颜色 、 字 体 大 小 和 
宽度 等 。 这 里 需要 注意 的 是 ， 对 于 右 侧 部 分 的 无 序列 表 样 式 代码 ， 是 和 22.2.2 节 中 的 选择 器 
leftside 一 起 定义 的 ， 这 里 就 不 再 重复 介绍 了 。 


《CE 中 间 部 分 


页 面 主体 内 容 中 间 部 分 信息 比较 简单 ， 只 是 显示 两 个 栏目 中 的 文章 。 自 上 而 下 可 以 分 为 
人 文中 国 和 走 遍 中 国 两 个 栏目 。 在 IE9.0 中 浏览 效果 如 图 22-6 所 示 。 


人 ms 通 DIV+CSS3 网 布局 与 样式 


在 品 茶 的 基础 上 发 展 起 来 的 ， 品 茶 也 称 品 若 ， 由 主人 

五 知己 ， 品 评 名 茶 。 但 是 斗 茶 作 为 排列 新 茶 优 务 顺序 
动 ， 则 与 平和 的 品 若 不 同 ， 有 着 比 技巧 、 斗 输 高 的 竺 
曾经 有 私 识 老师 
， 因 此 这 


古 江山 城南 江 郎 
龙 君 海 公主 储 其 地 江 P 
梅 竹马 ， 
国 需 ， 二 朗 摘 鱼 ， 大 郎 季 猪 。 
龙 君 以 海 公主 蝎 婚 将 军 里 针 ， 
hp 俗 谓 冯 始 红 者 也 ， 陶 各 性 人 
疙 公主 不 从 ， 奔 居 江 地 。 蜂 内 妨 率 改 精 及 奸 兵 靳 : 
好 毒 迪 无 数 ， 油 山头 来。 二 郎 举凡 排 钙 括 ， 搜 石头 绝 ， 三 郎 从 


22-6 页 面 主 体 中 间 部 分 


在 HIMIL 文 件 中 ， 实 现 上 


回 


效果 的 代码 如 下 : 


<div id="content"> 

<div class="post"> 

<h2><a href="#" rel="bookmark" title="An image in a post"> 人 文中 国 </ 
a></h2> 

<div class="contenttext"> 

<p><img src="images/01.jpg" alt="an image" width="438" /> 

斗 茶 是 在 品 茶 的 基础 上 发 展 起 来 的 。 品 茶 也 …… 

</p> 

</div> 

<div class="post"> 

<h2><a href="#"” title="Blockquotes galore"> 走 遍 中 国 </a></h2> 

<div class="contenttext"> 

<p><img src="images/ 江 郎 山 .jpg”alt="an image" /> 古 江山 城南 江 郎 山 通海 。 东 海龙 君 
海 公主 借 其 地 江 氏 三 郎 青梅 竹 马 ，…… 

</p> 

<p><a href="#"> 更 多 选择 …</a></p> 

</div> 

</div> 

</div> 

</div> 


在 上 面 代 码 中 ， 层 content 是 中 间 部 分 的 布局 容器 ， 用 于 包含 文本 段落 信息 。 该 层 中 包含 
了 标题 、 段 落 和 图 片 等 HTML 元素 。 
在 CSS 样 式 文件 中 ， 用 于 修饰 上 面 HIML 标 记 的 样式 代码 如 下 : 
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#content { 

border-left: lpx solid rgb(224, 224, 224); 

border-right: lpx solid rgb(224, 224, 224); 

margin: Opt 150px Spx; 
padding: Opt lO0px; 

line-height: 1.6em; 

} 

#content h2 { margin: Opt Opt lO0px; font-size: 1.6em; } 
#content h3 { margin: Opt Opt 8px; font-size: 1.4em; } 
#content img { 
border: lpx solid rgb(208, 208, 208); 

margin: 3px lO0px 3px Opt; 
float: left; } 

#content ul, #content ol, { margin: Opt Opt 1l6px 20px; } 
#content li { padding: Opt Opt Opt Spx; } 

#content ul ul, #content ol ol{ margin: Opt Opt Opt l6px; } 
.Contenttext { overflow: hidden; } 

* html .contenttext { overflow: visible; height: lpx; } 

* html .contenttext p { overflow: hidden; width: 99%; } 
.post { margin: Opt Opt 25px; } 


上 面 代码 中 ，#content 选 择 器 定义 了 左右 边框 显示 样式 、 内 外 边 距 和 行 高 。 类 选择 器 post 
定义 了 外 边 距 ， 选 择 器 contenttext 定 义 了 隐藏 属性 。 其 他 选择 器 分 别 定义 了 标题 、 图 片 、 列 表 
选项 等 显示 样式 。 


ER 页 脚 部 分 


页 脚 部 分 通常 用 来 显示 版 权 信息 、 联 系 方式 和 作者 信息 等 。 通 常 只 要 风格 与 整体 页 
一 协调 即 可 。 本 实例 的 页 脚 部 分 非常 简单 ， 在 正 9.0 中 ， 浏 览 效果 如 图 22-7 所 示 。 


导 


图 22-7 页 脚 部 分 


在 HTML 文 件 中 ， 实 现 上 面 效 果 的 代码 如 下 : 
<div id="footer"><a href="#"> 版 权 所 有 : 李 四 工 作 室 </a></div> 


上 面 代码 中 ， 创 建 了 一 个 div 层 ， 层 里 面包 含 了 一 个 超级 链接 。 
在 CSS 文 件 中 ， 修 饰 上 面 标记 的 样式 代码 如 下 : 


#footer 
border-top: 2px solid rgb(224, 224, 224); 
margin: Opt auto; 

padding: lO0px Opt; 

background-color: rgb(255, 255, 255); 
clear: both; 

color: rgb(128, 128, 128); 

font-size: 0.9em; 


加 
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font-weight: normal; 
line-height: 1.3em; 
text-align: center; 

width: 760px; 

上 

#footer a { 
background-color: inherit; 
color: rgb(128, 128, 128); 
font-weight: normal; 
text-decoration: none; } 
#footer a:hover { 
background-color: inherit; 
color:s rgb(807 807 80) 7 
text-decoration: underline; 


} 

上 面 代 码 中 ， 选 择 器 #ooter 定 义 了 边框 样式 、 内 外 边 距 、 背 景色 、 字 体 颜 色 、 字 体 大 
小 、 字 体 样式 、 对 齐 方式 和 高 度 ， 并 用 clear 属 性 消除 上 面 使 用 foat 的 效果 。 其 他 选择 器 分 别 
定义 了 超级 链接 的 显示 样式 ， 例 如 鼠标 悬浮 等 。 


AAA 


22.3 ”整体 调整 


各 个 子 块 完成 之 后 ， 其 页 面 基 本 布局 差不多 就 可 以 完成 了 。 但 最 后 还 需要 对 页 面 整 体 样 
式 进 行 查看 ， 细 节 上 做 小 的 调整 ， 例 如 调整 padding 和 margin 的 值 等。 调整 前 ， 在 IE9.0 中 浏览 
效果 如 图 22-8 所 示 。 


图 22-8 调整 前 效果 
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第 22 章 ， 传承 文化 一 一 文化 宣传 类 网 站 


在 CSS 文 件 中 ， 添 加 调整 代码 如 下 : 


* { margin: Opt; padding: Opt; } 
body { 
background: rgb(244, 244, 244) url('images/bg.gif') repeat-y scroll 
center top; 
color: rgb(48, 48, 48); 
font-family: Verdana,Tahoma,Arial,sans-serif; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
font-size: 76%; 
line-height: normal; 
font-size-adjust: none; 
font-stretch: normal; 
| 
a { background-color: inherit; color: rgb(40, 110, 160); font-weight: 
bold; text-decoration: none; } 
a:hover { background-color: inherit; color: rgb(40, 110, 160); font- 
weight: bold; text-decoration: underline; } 
a img { border: Opt none ; } 


在 上 面 代码 中 ， 全 局 选择 器 * 定 义 了 内 外 边 距 ，body 选 择 器 定义 了 背景 色 、 背 景 图 片 、 
字体 、 字 体 颜色 、 字 体 大 小 、 行 高 等 。 其 他 选择 器 分 别 定义 了 超级 链接 显示 样式 。 

页 面 调整 后 ， 在 IE9.0 中 ， 浏 览 效果 如 图 22-1 所 示 。 可 以 发 现 字体 大 小 、 字 体 颜 色 和 超级 
链接 等 发 生 了 变化 。 


.定义 块 的 高 度 时 ， 如 果 高 度 小 于 10px， 则 显示 10px， 如 何 解 决 ? 

如 果 块 元 素 最 小 高 度 为 10px， 当 高 度 定义 小 于 10px 时 仍 为 10px。 其 解决 方 
法 是 ， 为 此 块 元 素 添加 样式 overflow:hidden 语 句 ， 或 者 让 此 块 元 素 的 字体 大 小 等 于 此 块 元 素 
的 高 度 。 

2. 在 浏览 器 中 ， 若 列表 选项 li 为 浮动 ， 则 列表 后 面 的 元 素 不 能 换行 ， 如 何 解 决 ? 

其 解决 办 法 是 ， 为 这 个 ul 无 序列 表 定义 合适 的 高 度 ， 或 者 给 包含 这 个 tl 无 序列 表 的 父 元 
素 div 层 定义 合适 的 高 度 。 
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